在jQuery中拖动元素答案

【问题标题】：Dragging elements in jquery在jQuery中拖动元素
【发布时间】：2012-05-19 17:05:19
【问题描述】：

当我将多个项目拖放到特定的 div 时，它只需要第一个元素。后来当我签入 console.log($(ui.draggable)) 长度为 1。

({selector:"", context:#1=({}), 0:#1#, length:1})  when i dragged 3 elements

请帮忙看看我哪里出错了？

http://jsfiddle.net/akkiys/Hkfh2/4/

HTML 如下所示：

<ul id="drag" >
    <li id="1">one</li>  
    <li id="2">two</li>    
    <li id="3">three</li>  
    <li id="4">four</li> 
    <li id="5">five</li>        
</ul>

和 JavaScript：

var selectedClass = 'ui-state-highlight',
    clickDelay = 600,
    // click time (milliseconds)
    lastClick, diffClick; // timestamps
$("#drag li")
// Script to deferentiate a click from a mousedown for drag event
.bind('mousedown mouseup', function(e) {
    if (e.type == "mousedown") {
        lastClick = e.timeStamp; // get mousedown time
    } else {
        diffClick = e.timeStamp - lastClick;
        if (diffClick < clickDelay) {
            // add selected class to group draggable objects
            $(this).toggleClass(selectedClass);
        }
    }
}).draggable({
    scroll: false,
    revertDuration: 10,
    // grouped items animate separately, so   leave this number low
    start: function(e, ui) {
        ui.helper.addClass(selectedClass);
    },
    stop: function(e, ui) {
        // reset group positions
        $('.' + selectedClass).css({
            top: 0,
            left: 0
        });
    },
    drag: function(e, ui) {
        // set selected group position to main dragged object
        // this works because the position is relative to the starting position
        $('.' + selectedClass).css({
            top: ui.position.top,
            left: ui.position.left
        });


    }
});

$(".drop").droppable({


    drop: function(event, ui) {


        var droppableId = $(this).find('div.inner').attr("id");

        //var id = ui.draggable.attr("id");   // i need to retrive multiple id
        console.log($(ui.draggable))
        var m_id = [];

        $.each($(ui.draggable), function(i, e) {
            m_id.push(e.id);
            alert(m_id);
        });
        console.log(m_id);


    }
});

【问题讨论】：

使用你的 jsFiddle，在 chrome 中，我收到一个提醒，说我拖了多少，它说正确的数字。这不是你看到的吗？
@Grezzo 请尝试拖动多个项目并检查。我需要我拖过的所有多个值。我认为您拖动单个项目。
“拖动多个项目”是什么意思？我一放手，他们就回到了原来的位置。提供一些确切的步骤以及您在每个步骤中看到的内容和希望看到的内容。
只要我们放下它就会恢复到原来的位置，我知道。当我一次拖动一个或多个项目时，我需要 ID。
如何一次拖动多个项目？！两只老鼠？（开玩笑）你可能在尝试使用多点触控吗？

标签： jquery jquery-ui drag-and-drop jquery-ui-draggable droppable

【解决方案1】：

我不知道这个问题自从它创建和最新贡献以来已经过去了一年，但我只是偶然发现它并认为我尝试贡献，即使我在这些事情上完全是新手。希望有人会使用它。

我能看到的基本上是：由于您使用类 ('.' + selectedClass ) 拖动所有元素，因此您还应该在放置事件中检查相同的元素。

原因是你不是真正的'jquery-dragging'多个项目，你只是通过在元素周围一致地移动来在视觉上模拟它，在 jquery 将感知为实际被拖动的元素周围的元素周围。如果你在检查时运行你的小提琴，你会看到你选择的类在所有列表元素上切换，但是当你开始拖动时，只有一个元素将包含 jquery 使用的 .ui-draggable-dragging 类。

只需将放置示例代码中的标识符更改为 selectedClass 即可让您找到多个 id，例如：

$.each($("."+ selectedClass), function(i, e) {
m_id.push(e.id);
alert(m_id);
});

【讨论】：