jquery ui拖放顯示位置

Question

我是jQuery UI的新手。我已經經歷了jQuery排序和連接列表，我可以將元素從一側拖動到另一側，並將它們排序。使用這一點我已經完成。但是在這裏，我想要的是，當我將一個元素從一個容器放入另一個容器並且落下時，那麼應該顯示元素的位置，即左側，頂部位置。同樣，每個下降後它應該顯示的元素名稱是哪個名單A和名單B.

這裏內部工作FIDDLE

我曾試圖這樣做演示。所以我迄今的代碼是這樣的

<div name="list-a" class="droppable connectedSortable"> 
    <h3>List A</h3> 

    <div class="task-wrapper"> 
     <div class="draggable" id="1" name="1"> <a href="#">Element 1</a> 

     </div> 
     <div class="draggable" id="2" name="3"> <a href="#">Element 2</a> 

     </div> 
     <div class="draggable" id="3" name="3"> <a href="#">Element 3</a> 

     </div> 
    </div> 
</div> 
<div name="list-b" class="droppable connectedSortable"> 
    <h3>List B</h3> 

    <div class="task-wrapper"> 
     <div class="draggable" id="5" name="5"> <a href="#">Element 5</a> 

     </div> 
     <div class="draggable" id="6" name="6"> <a href="#">Element 6</a> 

     </div> 
    </div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $(".droppable>div").sortable({ 
     connectWith: ".connectedSortable>div" 
    }).disableSelection(); 
    $(".draggable").on('drop', function(e){ 
    var parentOffset = $(this).parent().offset(); 
    var relX = e.pageX - parentOffset.left; 
    var relY = e.pageY - parentOffset.top; 
    console.log('Left:'+relX+ 'Right:'+relY); 
}); 
}); 
</script> 

這是做拖放與排序。但它沒有顯示conatiners中的位置和列表項。 因此，任何幫助和建議都將非常可觀。由於

Answer 1

希望這會給你如何可以做一個想法：

var parent; 
var parentEl; 
$(function() { 
    $(".droppable>div").sortable({ 
     connectWith: ".connectedSortable>div", 
     start: function(event, ui) { 
      parent = ui.item.parent().parent().attr('name'); 
      parentEl = ui.item.parent(); 
     }, 
     stop: function(event, ui) { 
      if(parent != ui.item.parent().parent().attr('name')){ 
       alert('top: '+ui.item.position().top); 
       alert('left: '+ui.item.position().left); 
       alert('for '+parent); 
       parentEl.children('div').each(function(){ 
        alert($(this).attr('name'));  
       }); 
       alert('for '+ui.item.parent().parent().attr('name')); 
       ui.item.parent().children('div').each(function(){ 
        alert($(this).attr('name'));  
       }); 

      } 
     } 
    }).disableSelection(); 
}); 

例子：

http://jsfiddle.net/2wYx9/

只是你確實有一個小錯字一個FYI

在你的html中，你的名字Element 2是3而不是2我在例子中解決了這個問題在上面。

<div class="draggable" id="2" name="3"> <a href="#">Element 2</a>