jquery-uiでソート可能なようにドラッグ＆ドロップ可能

いくつかの位置で内部オブジェクトを置き換えることができるデータセンターキャビネットをシミュレートする必要があります。私の仕事はここにある：http://jsfiddle.net/6zGLk/10/jquery-uiでソート可能なようにドラッグ＆ドロップ可能

マイHTML：

<div class="objectContainer"> 
    <div class="object"> 
     This is a draggable object 
    </div> 
</div> 
<div class="position">position 2</div> 
<div class="position">position 3</div> 
<div class="position">position 4</div>

マイJS：

$(init); 
    function init() { 
     $('<div class="objectHolder"></div>').appendTo('.position').droppable({ 
      accept: '#objectContainer div', 
      hoverClass: 'hovered', 
      drop:function(event, ui){ 
       ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); 
      } 
     }); 

     $('.objectContainer').droppable({ 
      hoverClass: 'ui-state-highlight', 
      drop:function(event, ui){ 
       ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); 
      }    
     }); 

     $(".object").draggable({ 
      cursor: 'move', 
      axis: "y", 
      revert: 'invalid' 
     }); 
    }

しかし、私は私の位置に私のオブジェクトを配置することはできませんし、いくつかの理由のために私が使用することはできませんjQuery UIはソート可能です。彼らのクラスで私のポジションを呼び出さなければならなかったので、特定のIDでコールすることはできません！

どのように修正する必要がありますか？

出典

2017-05-17 amir zaghari

私はこのような何かをお探しですか？

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Sortable - Default functionality</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> 
 
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
 
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
 
    #sortable li span { position: absolute; margin-left: -1.3em; } 
 
    </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> 
 
    <script> 
 
    $(function() { 
 
    $("#sortable").sortable(); 
 
    $("#sortable").disableSelection(); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<ul id="sortable"> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li> 
 
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li> 
 
</ul> 
 
    
 
    
 
</body> 
 
</html>

出典

2017-05-17 09:32:04 Syno

私は何らかの理由でソート可能使用しないことを述べた!!!私は私の空の位置を保つ必要があり、ソート可能な役に立たない –

よろしく！（！）@amirzaghari – Syno

jquery-uiでソート可能なようにドラッグ＆ドロップ可能

答えて

関連する問題