能夠拖動但不拖放：jQuery插件

我試圖在我的應用中使用jQuery插件實現拖放功能，如下所述：http://farhadi.ir/projects/html5sortable/無論如何，我只能拖動列表對象而不拖放他們在我的項目中。能夠拖動但不拖放：jQuery插件

然後，我試着簡單地實現.html文件，該文件僅實現了所描述的拖放操作，而沒有描述我的應用程序的所有複雜性。

所以，這裏是代碼：

<HTML> 
<HEAD> 
</HEAD> 
<BODY> 



<section id="demos"> 
    <h1>Demos</h1> 
    <style> 
     #demos section { 
      overflow: hidden; 
     } 
     .sortable { 
      width: 310px; 
      -webkit-user-select: none; 
      -moz-user-select: none; 
      -ms-user-select: none; 
      user-select: none; 
     } 
     .sortable.grid { 
      overflow: hidden; 
     } 
     .sortable li { 
      list-style: none; 
      border: 1px solid #CCC; 
      background: #F6F6F6; 
      color: #1C94C4; 
      margin: 5px; 
      padding: 5px; 
      height: 22px; 
     } 
     .sortable.grid li { 
      line-height: 80px; 
      float: left; 
      width: 80px; 
      height: 80px; 
      text-align: center; 
     } 
     .handle { 
      cursor: move; 
     } 
     .sortable.connected { 
      width: 200px; 
      min-height: 100px; 
      float: left; 
     } 
     li.disabled { 
      opacity: 0.5; 
     } 
     li.highlight { 
      background: #FEE25F; 
     } 
     li.sortable-placeholder { 
      border: 1px dashed #CCC; 
      background: none; 
     } 
    </style> 

    <section> 
     <h1>Sortable List</h1> 
     <ul id="sortable1" class="sortable list"> 
      <li draggable="true" class style="display: list-item;">Item 1 
      <li draggable="true" class style="display: list-item;">Item 2 
      <li draggable="true">Item 3 
      <li draggable="true">Item 4 
      <li draggable="true">Item 5 
      <li draggable="true">Item 6 
     </ul> 
    </section> 
</section> 
<script src="/html5sortable/jquery-1.7.1.min.js"></script> 
    <script src="/html5sortable/jquery.sortable.js"></script> 
    <script> 
     $(function() { 
      $('#sortable1, #sortable2').sortable(); 
      $('#sortable3').sortable({ 
       items: ':not(.disabled)' 
      }); 
      $('#sortable-with-handles').sortable({ 
       handle: '.handle' 
      }); 
      $('#sortable4, #sortable5').sortable({ 
       connectWith: '.connected' 
      }); 
     }); 
    </script> 
</BODY> 
</HTML>

但是，即使這是行不通的。在網站上給出的例子正常運行，所以必須有一些錯誤。

我已經正確下載幷包含了所有需要下載/包含的文件嗎？

來源

2013-12-10 coder

您的任何'li'標籤都沒有關閉... – Robb

有一個額外的「/」中的相對地址已定義的。去掉它。

來源

2013-12-11 07:21:06 user221287

我認爲你需要關閉li標籤是這樣的：

<ul id="sortable1" class="sortable list"> 
    <li draggable="true" class style="display: list-item;">Item 1</li> 
    <li draggable="true" class style="display: list-item;">Item 2</li> 
    <li draggable="true">Item 3</li> 
    <li draggable="true">Item 4</li> 
    <li draggable="true">Item 5</li> 
    <li draggable="true">Item 6</li> 
</ul>

fiddle

來源

2013-12-10 17:34:25 Robb

它仍然不起作用。是的，我看到它在小提琴中工作。 – coder

請看這個後續問題：http://stackoverflow.com/questions/20512312/drag-and-drop-working-in-fiddle-but-not-locally – coder

請看這個後續問題：http：// stackoverflow .com/questions/20512312 /拖放式在線工作但不在本地忽略上述評論。 – coder

能夠拖動但不拖放：jQuery插件

回答

相關問題