代码之家 › 专栏 › 技术社区 › fyjham

添加到可排序文件后编辑可拖动文件

draggable jquery-ui-sortable jquery-ui jquery javascript

fyjham · 技术社区 · 15 年前

嘿,我正试图找出需要绑定到什么事件,以及需要使用什么属性来获取对已删除项(即接收列表中的项)的dom元素的引用。

这是我到目前为止所拥有的…

<ul id="toolbox">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<ul id="existing">
</ul>
<script language="javascript">
    $('#existing').sortable({
        revert: true
    });
    $('#toolbox li').draggable({
        connectToSortable: '#existing',
        helper: 'clone',
        revert: 'invalid',
    });
</script>

例如,我的目标是,一旦它被放到现有的保险商实验室中,就把它变成其他东西(任何其他东西都足够了——真正的实现要复杂得多。我只需要动手处理那个dom元素)。

我已尝试将以下内容作为可分类邮件的接收:

function receive(ev, ui)
{
    $(this).append('<b>this</b>');
    ui.sender.append('<b>sender</b>');
    ui.item.append('<b>item</b>');
}

但这似乎是现有的保险商实验室,发送方和项目都是在工具箱中拖动的LI。我要寻找的是新创建的李内现有。有没有什么财产或其他事件能让我得到我想要的?

3 回复 | 直到 15 年前

Justin Johnson 15 年前

我最近也有同样的问题。我用以下方法解决了它:

$('#existing').droppable({
    drop: function(e, ui) {
        // ui.draggable is the node that gets created in #existing
        // ui.draggable[0].originDragger is the node that was 
        // dragged from #toolbox
    }
}).sortable({
    revert: true
});

munch 15 年前

我没有试过这两种方法,但从理论上讲,它们似乎是可行的。首先,如果你 ul#existing 也是一个 droppable 你可以做点什么 drop 活动,比如从李那里得到你需要的信息 text() ,从DOM中移除该对象并生成一个新元素。

或者,你可以在 stop 可拖动的事件,例如检查父元素是否 UL存在 . 希望这有帮助。

ekhaled 15 年前

不绑定到 sortreceive ,而不是绑定到 sortout 像这样

$("#sortable").bind('sortout', function(event, ui) {
 console.log(ui.item);
});

或

$("#sortable").sortable({ //during initialization
  out:function(event, ui) {
     console.log(ui.item);
   }
 });

在这种情况下 ui.item 将是您正在寻找的元素

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前