JQuery - 排序div的問題

我絕對是JQuery的新手，基本上是整個web開發。我試圖從左邊的div（＃選擇）拖動一些div（+他們的內容）到正確的div（#drop），然後讓它們在'#drop'div中排序。我已經完成了拖動部分，但是，即使我已經實現了必要的代碼，它們也不能在'#drop'div中排序。JQuery - 排序div的問題

的源代碼：

HTML結構：

<body class="doc"> 
    <div id="header">Business Entry</div> 
    <div id="content"> 
     <div id="selection"> 
     <div id="dragTelNr" class="draggableElement"> 
      Telephone Number 
     </div> 
     <div id="address" class="draggableElement"> 
      Address 
     </div> 
     </div> 
     <div id="drop"> 

     </div> 
     <div class="clear"></div> 
    </div> 
    </body>

JS：

$(document).ready(function() { 

    $.fn.exists = function() { 
    return this.length !== 0; 
    } 

    var ids = new Array(); 
    ids[0] = 1; 
    ids[1] = 1; 

    var nextSibling; 
    var draggableOptions = { opacity: 0.6, revert: true, containment: '#content', zIndex: 100}; 

    $('.draggableElement').draggable({opacity: 0.6, revert: true, containment: '#content', zIndex: 100, 
    start: function(event, ui){ 
     //nextSibling = ui.helper.next(); 
    } 
    }); 

    $('#drop').droppable({ 
    hoverClass: '.dropHover', 
    accept: '.draggableElement', 
    activate: function(event, ui){ 
     nextSibling = ui.draggable.next();  
    }, 
    drop: function(event, ui){ 

     var draggable = ui.draggable; 

     if (draggable.parent().attr('id') != 'drop'){ 

     var draggableId = draggable.attr('id'); 

     if (nextSibling.exists() == false){ 
      $('<div id = "' + draggableId + '" class="draggableElement"></div>').html(ui.draggable.html()).draggable(draggableOptions).appendTo('#selection'); 
      alert("Insert at the end " + nextSibling); 
     } 
     else{ 
      $('<div id = "' + draggableId + '" class="draggableElement"></div>').html(ui.draggable.html()).draggable(draggableOptions).insertBefore(nextSibling); 
      alert("Insert before " + nextSibling); 
     } 

     switch(draggableId){ 
      case 'dragTelNr': 
      alert(draggable.attr('id')); 
      draggable.attr('id', draggableId + ids[0]).appendTo($(this)); 
      alert(draggable.attr('id')); 
      ids[0]++; 
      break; 

      case 'address': 
      alert(draggable.attr('id')); 
      draggable.attr('id', draggableId + ids[1]).appendTo($(this)); 
      alert(draggable.attr('id')); 
      ids[1]++; 
      break;  
     } 
     } 
    } 

    }); 

    $('#drop').sortable(); 
    //$('#drop').dissableSelection(); 
});

CSS：

.doc { 
    margin:auto; /* center in viewport */ 
    width: 1000px; /* fix page width */ 
} 

#header { 
    height: 80px; 
    width: 990px; 
    background:#efefef; 
    border: 1px solic black; 
    text-align: center; 
    font: bold 180% arial; 
    padding: 1em; 
} 

#selection { 
    width: 300px; 
    height: 500px; 
    border: 1px solid black; 
    float: left; 
    background-color: #D3D3D3; 
    text-align:center; 
} 

#drop { 
    width: 670px; 
    height: 500px; 
    border: 1px solid black; 
    float: left; 
    text-align: center; 
} 


.clear { 
    clear: both; 
} 

#content { 
    width: 990px; 
    height: 500px;  
} 

.draggableElement { 
    line-height: 1.286; 
    margin-top: 1.286em; 
    margin-bottom: 1.286em; 
    border: 2px solid black; 


} 

.dropHover{ 
    border: 3px solid black; 
}

順便提一下庫已經被適當進口，因此問題是否定的那裏。如果有人有一些建議如何使其工作，我會很感激。

下面是我的源代碼的鏈接：http://jsfiddle.net/Bt23y/

來源

2013-03-26 Husky

您是否嘗試將一個容器連接到另一個容器？ – 2013-03-26 10:11:59

我清理你的提琴把注意力集中在重要的事情：

http://jsfiddle.net/Bt23y/1/

如果你希望能夠拖動從一個列表項目的方式使他們可排序，你可以使用connectWith jqueryUI的sortable

<ul id="selection"> 
    <li>Item1</li>   
    <li>Item2</li> 
</ul> 
<ul id="drop"></ul>

$('#drop').sortable({connectWith: $('#selection')}); 
$('#selection').sortable({connectWith: $('#drop')});

來源

2013-03-26 10:21:41 ohcibi

從一個列表

「項目排序到另一個，反之亦然，通過選擇突入connectWith選項做，這是把所有相關的最簡單方法用CSS類列出，然後將該類傳遞給可排序函數（即connectWith：'.myclass'）「。

$('.sortableContainer).sortable({ 
     ... 
     connectWith: ".sortableContainer", 
     ... 
    })

演示http://jqueryui.com/sortable/#connect-lists

來源

2013-03-26 10:16:19

JQuery - 排序div的問題

回答

相關問題