Jquery - 可拖动 - 检查拾取的位置

时间:2014-03-13 02:31:34

标签: javascript jquery jquery-ui

我怎样才能获得id元素从哪里获取elemet draggable?

<div id="droppable1">
    <div id="draggable">DRAG ME</div>
</div>
<div id="droppable2"></div>

用户将div div draggable(DRAG ME)移动到元素div droppable2。 我需要检查从哪里拿到。我不能使用parent(),因为总是显示id draggable1。

1 个答案:

答案 0 :(得分:0)

据我所知,没有现成的方法可以做到这一点,但实施起来并不难。

基本上您需要将初始父项存储在#draggable元素上,然后每次发生drop事件时都需要更新该值。为了使这更容易一点,drop事件提供了对通过ui.draggable属性拖放的元素的方便访问。

一个非常简单的实现如下。

<强> HTML

<div id="droppable1" class="droppable">droppable1
    <div id="draggable" data-from-parent='droppable1'>
        From:  <span class="from"></span><br>
        To: <span class="to"></span>
    </div>
</div>
<div id="droppable2" class="droppable">droppable2</div>

<强>的Javascript

$("#draggable").draggable();
$(".droppable").droppable({
    drop: function(event, ui)
    {
        ui.draggable.find(".from").text(ui.draggable.data("from-parent"));
        ui.draggable.find(".to").text($(this).attr("id"));
        ui.draggable.data("from-parent", $(this).attr("id"));
    }
});

Here is a jsFiddle显示此代码的实际效果。