jquery - 如何设置可拖动对象相对于可放置对象的位置

Question

嗨，我有一个名为 bodyArea 的 div，我想将一个 ibject 拖到 div 中。

当我拖动对象时，我希望该对象被附加到 div 的完全相同的位置，我正在实现可拖动对象..

但由于一些问题（我找不到它不能正常工作..

下面是我的代码

 $("#bodyArea").droppable({ 
                drop: function(event, ui){
                    //this is so that the element "sticks" even when tab is changed.
                    ui.draggable.addClass("draggedout");
                                    $(this).append(ui.draggable.css({'top': event.pageY-$(this).offset().top,'left': event.pageX-$(this).offset().left}));// this line is what i added extra.
//and its for this line that draggable object is getting appended but not at the desired position

                },
                //changes current tab to the tab the piece belongs to when dragged out of body area
                out: function(event, ui){
                    ui.draggable.removeClass("draggedout");
                    var whichTab = ui.draggable.parent().attr("id");
                    $("#piecesArea").tabs('select' , whichTab);
                }
            });

Answer 1

我不太熟悉可拖动/可放置的 jQuery UI 功能，但您应该能够使用 获取放置事件下的元素document.elementFromPoint( x, y )，并根据需要在该元素之前或之后插入您的对象。

$this.hide(); // hide it momentarily so the unlerlying element is visible
element = document.elementFromPoint( event.pageX, event.pageY );
$this.insertBefore(element).show();