可排序与jQuery UI可拖放

Question

我有一个页面，我需要将项目从可排序到可拖放容器中。它似乎没有工作，我希望有人能告诉我为什么。从我所看到的情况来看，我拥有所有的连接性，但可丢弃性不会从可排序性中丢失。

请注意，我能做到以下几点，需要保持此功能：

1. 拖动可拖动的项目（而不是在排序）为可放开
2. 拖动可拖动的项目（不在排序）插入排序

但我不能够：

拖动从排序进可放开

这里是我的代码：

$(function() { 
    $('.drag').draggable({ 
    helper: 'clone', 
    connectToSortable: '#sortable' 
    }); 
    $("#sortable").sortable({ 
    connectWith: '#drop' 
    }); 
    $("#drop").droppable({ 
    tolerance: 'pointer', 
    connectWith: '#sortable', 
    drop: function (evt, ui) { 
     var $destination = $(this); 
     ui.draggable.appendTo($destination); 
    } 
    }).draggable(); 
}); 

...并有小提琴： http://jsfiddle.net/eEJHb/4/

Answer 1

我会建议使用http://johnny.github.io/jquery-sortable/。你的情况应该够了。

示例http://johnny.github.io/jquery-sortable/#handle应该正是您在寻找的内容。

如果您需要使用JqueryUI，或许http://api.jqueryui.com/droppable/#option-accept可能会有所帮助。 connectWith不受droppable支持。

Answer 2

Jquery UI无法连接可排序的排序。 Droppable没有参数connectWith。你要培养的使用拖动&投掷的组合http://jsfiddle.net/shuklendu/uacc7/17/

$("#draggable li").draggable({ 
    revert: true}); 

$('#droppable').droppable({ 
    accept: 'li', 
    drop: function() { 
    alert('success') } 
}); 

用过很多jQuery的UI的这样一个特征，同时建立http://www.impresspages.org

Answer 3

当项目上投掷的下降，你必须

1. 克隆它
2. 追加手动可投放，
3. 从删除它排序。
4. 如果你想拖动项背，使其可拖动，一旦它被添加到dropppable

$(function() { 
 
var draggableOptions = { 
 
    connectToSortable: ".list", 
 
    helper: "clone", 
 
    revert: "invalid", 
 
    revertDuration: 0, 
 
    start:function(ev,ui){ 
 
    $(ev.target).hide(); 
 
    ui.helper.data('dropped', false); 
 
    }, 
 
    stop:function(ev,ui){ 
 
    if(ui.helper.data('dropped')){ 
 
     ev.target.remove(); 
 
    }else{ 
 
     $(ev.target).show(); 
 
    } 
 
    } 
 
}; 
 
var sortableOptions = { 
 
    helper: 'clone', 
 
    connectWith: ".list", 
 
    placeholder : "sortable-item-placeholder", 
 
    receive: function (event, ui) { 
 
     ui.item.remove(); 
 
    }, 
 
    beforeStop:function(ev,ui){ 
 
     if(ui.helper.data('dropped')){ 
 
     ui.item.remove(); 
 
     } 
 
    } 
 
}; 
 
$("#sortable").sortable(sortableOptions); 
 

 
var droppableOptions = { 
 
    drop:function(ev,ui){ 
 
    if(!ui.helper.is("tr")){ 
 
     var $obj = ui.helper.clone(); 
 
     $obj.css({ 
 
     position: 'relative', 
 
     top: "0px", 
 
     left: "0px" 
 
     }); 
 
     $($obj).draggable(draggableOptions); 
 
     $obj.appendTo($(this).find("td ul")); 
 

 
     ui.helper.data('dropped', true); 
 
     $(this).removeClass("drop-highlight"); 
 
    } 
 
    }, 
 
    over: function(){$(this).addClass("drop-highlight");}, 
 
    out: function(){$(this).removeClass("drop-highlight");}, 
 
}; 
 
$("tr").droppable(droppableOptions); 
 
});

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; } 
 
li { margin: 5px; padding: 5px; height:2em;} 
 
.droppable{ 
 
    width:100%; 
 
} 
 
table{ 
 
    width:100%; 
 
} 
 
td{ 
 
    height : 2.5em; 
 
    border: 1px solid black; 
 
} 
 
.drop-highlight{ 
 
    background: gray; 
 
} 
 
.sortable-item-placeholder{ 
 
    background: yellow; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 

 

 
<ul id="sortable" class="list"> 
 
    <li class="ui-state-default green">Sample Task 1</li> 
 
    <li class="ui-state-default green">Item 2</li> 
 
    <li class="ui-state-default green">Item 3</li> 
 
    <li class="ui-state-default green">Item 4</li> 
 
    <li class="ui-state-default green">Item 5</li> 
 
</ul> 
 

 
<table id="droppable-table"> 
 
    <tbody> 
 
    <tr><td><ul class="droppable">1</ul></td></tr> 
 
    <tr><td><ul class="droppable">2</ul></td></tr> 
 
    <tr><td><ul class="droppable">3</ul></td></tr> 
 
    <tr><td><ul class="droppable">4</ul></td></tr> 
 
    <tr><td><ul class="droppable">5</ul></td></tr> 
 
    <tr><td><ul class="droppable">6</ul></td></tr> 
 
    </tbody> 
 
</table>