Question

当我拖动多个项目并将其放到特定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);


    }
});

Answer 1

我不知道这个问题自创建以来是否已经消失了一年以及最新的贡献，但我只是偶然发现它并认为Id尝试做出贡献，即使我是这些事情的新手。希望有人可以使用它。

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

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

只需将drop examplecode中的标识符更改为selectedClass，就可以找到多个id，例如：

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

在jquery中拖动元素

1 个答案: