정렬 가능한 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 정렬 가능. 나는 그들의 직급으로 전화해야했고, 나는 그들에게 특별한 이드를 부를 수 없다!

어떻게 수정해야합니까?

출처

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

! 나는 내 빈 자리를 유지해야하며 sortable 도움이되지 않습니다 –

오케이 !!! (!) @ amirzaghari – Syno

정렬 가능한 jquery-ui에서 드래그 가능하고 드리블 가능

답변

관련 문제