获取使用 JQUERY 拖动的 Div 元素的属性 ID

Question

最近我一直在尝试获取正在拖动的 Div 的 id="whatever-id" 属性，但到目前为止我还没有成功。下面是我的代码（仅拖动部分），我尝试使用 ui 和事件对象获取此 ID 属性，但我看不出问题出在哪里。

$(function() 
{
    $( ".action-zone" ).draggable(
    { 
        scroll: true,
        helper:"clone",
        snap: ".actionDropAreaMovebleAction",
        snapMode: "inner",
        snapTolerance: 50,
        opacity: 0.7,
        forcePlaceholderSize: true,
        forceHelperSize: true,
        start: function( event, ui ) 
        {
            alert(ui.draggable.attr("id"));

            //INSERT THE DROP ZONE DIV IN ALL ELEMENTS EXCEPT ON THOSE WHOSE CLASS IS DRAGGINGACTION
            $( ".action-zone:not(.draggingAction)" ).after( "<div class='actionDropAreaMovebleAction'>\n\
                                            <div class='plus'>\n\
                                                <i class='fa fa-hand-o-down'></i>\n\
                                            </div>\n\
                                        </div>" );

            $(".actionDropAreaMovebleAction").addClass("highlighted");
            makeActionsDroppable();
        },
        stop:function( event, ui ) 
        {
            $(".actionDropAreaMovebleAction").removeClass("highlighted");
            $("div").remove(".actionDropAreaMovebleAction");
            $(this).removeClass("draggingAction");
            //alert("hallo");
        }
    });
});

如您所见，我尝试“alert()”类为“action-zone”的 DIV 元素的属性 ID仅用于测试目的，但是当警报出现时，我会返回一个“undefined”元素。

有人知道为什么会这样吗？

提前谢谢你。

Answer 1

你只能使用ui.draggable来获取拖放到其他地方的可拖动对象，就像你可以在droppable中捕捉对象一样：

$(".drop-zone").droppable({
  drop: function(event, ui) {
    console.log(ui.draggable); // will give you the draggable object
  }
});

但是，在您的 draggable 的 start 事件中，您可能会像这样获得对象的 id：

$(".action-zone").draggable({
  start: function(event, ui) {
    console.log(ui.draggable); // will give you undefined
    console.log(event.target.id); // will give you the id
    console.log(event.target.attr('id')); // error!
    console.log($(event.target).attr('id')); // will give you the id
  }
});