Question

这是我遇到的问题：我创建了几个可拖动的元素但是当我在droppable元素上放一个时，它不会停留在那里。以下是更多细节。

我的JavaScript函数从PHP接收JSON数组，然后使用循环创建可拖动元素：

<script type="text/javascript">
    function init() {
        var items = <?php echo $result_j;?>; //items is an one dimensional array

        for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {      
            $('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
         }

使用'items'数组我创建了几个div元素（上面的代码），然后我将其变成可拖动的元素（下面的代码）。

         $(".snk_button").draggable( {
            containment: '#drag_section',//Div #drag_section contains the Div #drag 
            stack: '#drag div',
            cursor: 'move',
            revert: true
         } )

所以，一切似乎都符合预期，我可以拖动我的元素（从'items'数组创建）。

接下来，我创建了droppable元素，如下所示：

         $( "#dropp" ).droppable({
         drop: function() {
         alert('ok');
             }
         });
    }// End function init()
</script>

但是当我在这个droppable元素上拖动我的一个可拖动元素时，我甚至会收到警告，但是draggable元素不会停留在droppable元素上。

任何人都可以帮我确定为什么我的可拖动元素不会留在droppable元素上吗？

提前感谢您的帮助！

Answer 1

您使用过revert :true ..这意味着

还原表示如果设置为true，则拖动停止时元素将返回到其起始位置。可能的字符串值：'valid'，'invalid'。如果设置为无效，则只有在拖放器上没有删除拖动时才会进行恢复。如果有效，那就是另一种方式。

如果你的invalid元素没有放在合适的元素上，你可能需要draggable

Answer 2

非常感谢你指出我正确的方向。我已通过以下方式解决了这个特殊问题：

我已经编辑了我的可放置代码，如下所示：

$( "#filtered" ).droppable(
   drop: handleDrop
});

function handleDrop( event, ui ) {
    ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop

这解决了可拖动的问题，而不是停留在droppable上（前面已经描述过）。

JQuery UI'Droppable'的问题

2 个答案: