猿问

在两个列表之间进行单向拖放

我正在使用从 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();

此代码允许从第一个列表拖放到第二个列表，反之亦然。我只想拖放以一个方向工作，从第一个列表到第二个列表。这可能吗？任何帮助将不胜感激。谢谢。


明月笑刀无情
浏览 98回答 1
1回答

慕桂英3389331

你只需更改属性 connectWith: 这里我拒绝从 list2 拖动到 list1 ..&nbsp; $("#list-one, #list-two").sortable({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; connectWith: '#list-two',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; start: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sender = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recvok = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; over: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recvok = ($(this).not(sender).length != 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stop: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!recvok)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).sortable('cancel');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).disableSelection();<!doctype html><html><head>&nbsp; <meta charset="utf-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; <title>jQuery UI Sortable - Connect lists</title>&nbsp; <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">&nbsp; <link rel="stylesheet" href="/resources/demos/style.css">&nbsp; <style>&nbsp; #sortable1, #sortable2 {&nbsp; &nbsp; border: 1px solid #eee;&nbsp; &nbsp; width: 142px;&nbsp; &nbsp; min-height: 20px;&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 5px 0 0 0;&nbsp; &nbsp; float: left;&nbsp; &nbsp; margin-right: 10px;&nbsp; }&nbsp; #sortable1 li, #sortable2 li {&nbsp; &nbsp; margin: 0 5px 5px 5px;&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; font-size: 1.2em;&nbsp; &nbsp; width: 120px;&nbsp; }&nbsp; </style>&nbsp; <script src="https://code.jquery.com/jquery-1.12.4.js"></script>&nbsp; <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head><body>&nbsp;<ul id="list-one" class="connectedSortable">&nbsp; <li class="ui-state-default">Item 1</li>&nbsp; <li class="ui-state-default">Item 2</li>&nbsp; <li class="ui-state-default">Item 3</li>&nbsp; <li class="ui-state-default">Item 4</li>&nbsp; <li class="ui-state-default">Item 5</li></ul>&nbsp;<ul id="list-two" class="connectedSortable">&nbsp; <li class="ui-state-highlight">Item 1</li>&nbsp; <li class="ui-state-highlight">Item 2</li>&nbsp; <li class="ui-state-highlight">Item 3</li>&nbsp; <li class="ui-state-highlight">Item 4</li>&nbsp; <li class="ui-state-highlight">Item 5</li></ul>&nbsp;&nbsp;</body></html>另一个解决方案是防止第二个列表上的 mousedown 事件，但您无法重新排序列表&nbsp; $('#list-two li').mousedown(function(event){&nbsp; &nbsp;event.preventDefault();&nbsp; &nbsp;event.stopPropagation();&nbsp; });&nbsp; $("#list-one, #list-two").sortable({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; connectWith: '.connectedSortable',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; start: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sender = $(this);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recvok = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; over: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recvok = ($(this).not(sender).length != 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stop: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!recvok)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).sortable('cancel');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).disableSelection();<!doctype html><html><head>&nbsp; <meta charset="utf-8">&nbsp; <meta name="viewport" content="width=device-width, initial-scale=1">&nbsp; <title>jQuery UI Sortable - Connect lists</title>&nbsp; <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">&nbsp; <link rel="stylesheet" href="/resources/demos/style.css">&nbsp; <style>&nbsp; #sortable1, #sortable2 {&nbsp; &nbsp; border: 1px solid #eee;&nbsp; &nbsp; width: 142px;&nbsp; &nbsp; min-height: 20px;&nbsp; &nbsp; list-style-type: none;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 5px 0 0 0;&nbsp; &nbsp; float: left;&nbsp; &nbsp; margin-right: 10px;&nbsp; }&nbsp; #sortable1 li, #sortable2 li {&nbsp; &nbsp; margin: 0 5px 5px 5px;&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; font-size: 1.2em;&nbsp; &nbsp; width: 120px;&nbsp; }&nbsp; </style>&nbsp; <script src="https://code.jquery.com/jquery-1.12.4.js"></script>&nbsp; <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script></head><body>&nbsp;<ul id="list-one" class="connectedSortable">&nbsp; <li class="ui-state-default">Item 1</li>&nbsp; <li class="ui-state-default">Item 2</li>&nbsp; <li class="ui-state-default">Item 3</li>&nbsp; <li class="ui-state-default">Item 4</li>&nbsp; <li class="ui-state-default">Item 5</li></ul>&nbsp;<ul id="list-two" class="connectedSortable">&nbsp; <li class="ui-state-highlight">Item 1</li>&nbsp; <li class="ui-state-highlight">Item 2</li>&nbsp; <li class="ui-state-highlight">Item 3</li>&nbsp; <li class="ui-state-highlight">Item 4</li>&nbsp; <li class="ui-state-highlight">Item 5</li></ul>&nbsp;&nbsp;</body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答