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>

alt text

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中有一些文字。如果您希望它与droppable中的其他元素一起使用，您可以绝对定位拖动的元素，并使用父级的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)将拖动的项目附加到可放置的div，以便可以准确地完成定位。

在此处查看实时示例：http://jsfiddle.net/andrewwhitaker/F3sD3/

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

1 个答案: