如何使用jQuery捕获div中的已删除项？

Question

我正在尝试为学习目的重新创建魔兽世界动作栏.

到目前为止,我有吧,个别插槽是Droppable.当黄色div落入容器内部时,我能做什么呢？它位于.item div的中心？

@{
    ViewBag.Title = "Home Page";
}

<script language="JavaScript">
    $(function () {
        $(".draggable").draggable();
        $(".item").droppable({
            drop: function (event, ui) {
                $(this)
                .addClass("ui-state-highlight")
                .find("p")
                    .html("Dropped!");
            }
        });
    });
</script>

<div class="draggable">
</div>
<div class="bar">
    <div class="item">
    <p>a</p>
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>    
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

Answer 1

这个怎么样:

$(function() {
    $(".draggable").draggable();
    $(".item").droppable({
        drop: function(event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);    

            var width = $this.width();
            var height = $this.height();
            var cntrLeft = width / 2 - ui.draggable.width() / 2;
            var cntrTop = height / 2 - ui.draggable.height() / 2;

            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

编辑:我注意到目标中有一些文字div.如果你想这与在投掷的其他元素,则可以进行绝对定位拖动的元素,并使用偏移它left与top父:

var width = $this.width();
var height = $this.height();
var top = $this.offset().top;
var left = $this.offset().left;

var cntrLeft = (width / 2 - ui.draggable.width() / 2) + left;
var cntrTop = (height / 2 - ui.draggable.height() / 2) + top;

和:

ui.draggable.css({
    left: cntrLeft + "px",
    top: cntrTop + "px",
    zIndex:1,
    position: 'absolute'
});

笔记:

• ui.draggable 是放置在droppable上的可拖动项目.
• $this.append(ui.draggable)将拖动的项目附加到droppable,div以便可以准确地完成定位.

在这里查看一个实例:http://jsfiddle.net/andrewwhitaker/F3sD3/