Jquery droppable 获取可拖动的id

Posted

技术标签:

【中文标题】Jquery droppable 获取可拖动的id【英文标题】:Jquery droppable get draggable id 【发布时间】:2012-05-26 19:28:23 【问题描述】:

当我拖放到某个 div 时,我想拖动 id

  Drag  <ul id="demo" > 
         <li id="1" ></li>
         <li id="2" ></li>
        <li id="3" ></li>
        </ul>

         <div class="drop"> drop here!! </div>

JQUERY

  $(".drop").droppable( 
                drop: function(event, ui) 

      // i need to get dragged id (note:able to  drag multiple ids)

        1,2,3..     

                   
            );

请帮帮我!!谢谢

【问题讨论】:

【参考方案1】:

正如他们在 jQuery UI dropable doc 中所说的那样

所有回调都接收两个参数:原始浏览器事件和 准备好的 ui 对象,在下面查看该对象的文档(如果 您将第二个参数命名为“ui”):

ui.draggable - 当前可拖动元素,一个 jQuery 对象。 ui.helper - 当前可拖动的助手,一个 jQuery 对象 ui.position - 可拖动助手的当前位置 top: , left: ui.offset - 可拖动助手的当前绝对位置 top: , left:

ui.draggable 是作为jQuery object 删除的元素。

所以你可以使用ui.draggable.prop('id')获取ID

【讨论】:

我试过 $(".drop").droppable( drop: function(event, ui) var id=ui.draggable.prop('id'); alert(id); );但我没有得到任何价值。请帮帮我,我正在拖动多个 ID【参考方案2】:

您可以使用ui.draggable 来处理可拖动元素。

drop: function(event, ui) 
    var id = ui.draggable.attr("id");

演示: http://jsfiddle.net/9RBJG/

【讨论】:

谢谢!!但是,当我删除多个项目时,我需要删除所有已删除的 id。像 1,2,3 请帮我获取多个ID。我拖动了多个 id。【参考方案3】:

你可以将被删除的节点追加到一个div中,通过这个div你可以得到所有被删除的id。如下所示

$(".drop").droppable(
    drop: function(event, ui) 
        var id= ui.draggable.attr("id");
        $("#dropped-divs").append(id); 
    

【讨论】:

以上是关于Jquery droppable 获取可拖动的id的主要内容,如果未能解决你的问题,请参考以下文章

jQuery UI - Droppable 只接受一个可拖动的

如何使 jQuery UI droppable hoverClass 仅适用于可拖动对象?

检查 droppable 是不是已经包含另一个可拖动元素(jQuery UI)

JQuery Droppable 不接受可拖动项目

jQuery UI (Droppable):如果 droppable 具有相对/绝对的 css 位置,则可拖动元素不会放置在鼠标指针处

jQuery UI 的贪婪 droppable 无法按预期工作