1

複数のアイテムをドラッグして特定の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);


    }
});
4

1 に答える 1

0

この質問が作成されてから 1 年が経過し、最新の貢献がなされて以来、この質問が消滅したかどうかはわかりませんが、私はこれらのことについてまったくの初心者ですが、偶然見つけて貢献しようと思いました。うまくいけば、誰かがそれを使ってくれるでしょう。

私が見ることができるのは基本的に次のとおりです。クラス（ '.' + selectedClass ）ですべての要素をドラッグしているため、ドロップイベントでも同じことを確認する必要があります。

その理由は、実際には複数のアイテムを「jquery-dragging」するのではなく、jquery が実際にドラッグされている要素として認識する要素の周りで、要素を一斉に移動することで視覚的にシミュレートしているだけだからです。インスペクトをオンにしてフィドルを実行すると、選択したクラスが意図したとおりにすべてのリスト要素に切り替わるのがわかりますが、ドラッグを開始すると、jquery で使用される .ui-draggable-dragging クラスを含む要素は 1 つだけになります。

drop examplecode の識別子を selectedClass に変更するだけで、複数の ID を見つけることができます。

$.each($("."+ selectedClass), function(i, e) {
m_id.push(e.id);
alert(m_id);
});
于 2013-10-04T09:25:47.127 に答える