使用幫助器：'original'with sortable（）和draggable（）似乎不起作用

我有一個簡單的HTML頁面，我希望能夠將編號爲6-10的div拖動到可排序列表中，已經包含編號爲1-5的div。當我將可拖動的幫助器值設置爲「克隆」時，此頁面可以很好地工作。不過，我想使用'原創'幫手。這看起來根本不起作用。使用幫助器：'original'with sortable（）和draggable（）似乎不起作用

任何人都可以提出一個替代方案嗎？我試過製作「dropTarget」droppable（）區域，但這似乎不起作用。我想他們是互相矛盾的或者是什麼。任何建議將非常歡迎！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script> 
    <script src="Scripts/jquery-ui-1.8.11.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
    $(function() { 
     $("#dropTarget").sortable({ revert: true }); 
     $("#itemlist div").draggable({ connectToSortable: "#dropTarget", helper: 'original', revert: 'invalid' }); 
     $('#itemlist div, #dropTarget').disableSelection(); 
    }); 
    </script> 
</head> 
<body> 
    <div id="dropTarget" style="width: 100px; min-height: 50px; background-color: Red;"> 
    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
    <div>Item 4</div> 
    <div>Item 5</div> 
    </div> 
    <div id="itemlist"> 
    <div>Item 6</div> 
    <div>Item 7</div> 
    <div>Item 8</div> 
    <div>Item 9</div> 
    <div>Item 10</div> 
    </div> 
</body> 
</html>

來源

2011-09-08 tomasmcguinness

看來，你必須給itemlist下的div寬度和高度，以使它們正確工作。 connectToSortable只有在使用「clone」助手時才起作用（來自文檔 - http://docs.jquery.com/UI/Draggable） – tomasmcguinness

我已經修改了你的提琴在這裏：http://jsfiddle.net/3wCHu/5/

在jQuery文件說，它無法使用helper:"original"當連接到一個排序列表。我們可以有一個解決方法。

的第一件事情，你可以把助手代碼在你#itemlist爲 -
helper: function(ev, ui) { return "<div>" + $(this).text() + "</div>" }

其次，在你的#dropTarget代碼添加一種選擇，因爲 -
receive: function(ev, ui){ ui.item.remove() }
這裏ui.item指項目被拖動。

來源

2011-10-17 11:50:25 Ashwin

使用幫助器：'original'with sortable（）和draggable（）似乎不起作用

回答

相關問題