在两个列表之间进行单向拖放
我正在使用从 jQuery UI 获得的以下 JS 代码：将项目从一个列表移动到另一个列表：
$("#list-one, #list-two").sortable({
connectWith: '.connectedSortable',
start: function () {
sender = $(this);
recvok = false;
},
over: function () {
recvok = ($(this).not(sender).length != 0);
},
stop: function () {
if (!recvok)
$(this).sortable('cancel');
}
}).disableSelection();
此代码允许从第一个列表拖放到第二个列表，反之亦然。我只想拖放以一个方向工作，从第一个列表到第二个列表。这可能吗？任何帮助将不胜感激。谢谢。
明月笑刀无情浏览 97回答 1
1回答
-
慕桂英3389331
你只需更改属性 connectWith: 这里我拒绝从 list2 拖动到 list1 .. $("#list-one, #list-two").sortable({ connectWith: '#list-two', start: function () { sender = $(this); recvok = false; }, over: function () { recvok = ($(this).not(sender).length != 0); }, stop: function () { if (!recvok) $(this).sortable('cancel'); } }).disableSelection();<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <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></head><body> <ul id="list-one" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> <ul id="list-two" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li></ul> </body></html>另一个解决方案是防止第二个列表上的 mousedown 事件，但您无法重新排序列表 $('#list-two li').mousedown(function(event){ event.preventDefault(); event.stopPropagation(); }); $("#list-one, #list-two").sortable({ connectWith: '.connectedSortable', start: function () { sender = $(this); recvok = false; }, over: function () { recvok = ($(this).not(sender).length != 0); }, stop: function () { if (!recvok) $(this).sortable('cancel'); } }).disableSelection();<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Sortable - Connect lists</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #sortable1, #sortable2 { border: 1px solid #eee; width: 142px; min-height: 20px; list-style-type: none; margin: 0; padding: 5px 0 0 0; float: left; margin-right: 10px; } #sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; } </style> <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></head><body> <ul id="list-one" class="connectedSortable"> <li class="ui-state-default">Item 1</li> <li class="ui-state-default">Item 2</li> <li class="ui-state-default">Item 3</li> <li class="ui-state-default">Item 4</li> <li class="ui-state-default">Item 5</li></ul> <ul id="list-two" class="connectedSortable"> <li class="ui-state-highlight">Item 1</li> <li class="ui-state-highlight">Item 2</li> <li class="ui-state-highlight">Item 3</li> <li class="ui-state-highlight">Item 4</li> <li class="ui-state-highlight">Item 5</li></ul> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript