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>

它正在进行可拖放的拖放操作。但是它没有在conatiner中显示位置和列表项。所以任何帮助和建议都会非常明显。感谢

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>

jquery ui拖放放置显示位置

1 个答案: