jquery ui拖放显示位置

我是jQuery UI的新手。我已经经历了jQuery排序和连接列表，我可以将元素从一侧拖动到另一侧，并将它们排序。使用这一点我已经完成。但是在这里，我想要的是，当我将一个元素从一个容器放入另一个容器并且落下时，那么应该显示元素的位置，即左侧，顶部位置。同样，每个下降后它应该显示的元素名称是哪个名单A和名单B.jquery ui拖放显示位置

这里内部工作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中的位置和列表项。因此，任何帮助和建议都将非常可观。由于

来源

2014-01-15 NewUser

希望这会给你如何可以做一个想法：

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>

来源

2014-01-15 16:30:29 Trevor

@NewUser如果回答您的问题或提供反馈，请将此答案标记为已接受。谢谢 – Trevor

jquery ui拖放显示位置

回答

相关问题