jQuery UI, Droppable - 为什么这不起作用答案

【问题标题】：jQuery UI, Droppable - Why this doesn't workjQuery UI, Droppable - 为什么这不起作用
【发布时间】：2015-01-17 01:20:56
【问题描述】：

这很简单...在区域中拖放。但是，当我将 margin 设置为拖动元素（.a1_73、.a2_73）时，放置区域没有发生任何事情。说真的，我不知道为什么。怎么了？？？没有边距，一切都会变得更好。

HTML

<div id="a1_73" class="empty">#A1</div>
<div id="a2_73" class="empty">#A2</div>
<div id="a3_73" class="empty">#A3</div>
<div id="a4_73" class="empty">#A4</div>

<div class="a1_73 dragme">.A1</div>
<div class="a2_73 dragme">.A2</div>
<div class="a4_73 dragme">.A3</div>
<div class="a3_73 dragme">.A4</div>

Javascript

$(".dragme").draggable({
    start: function (event, ui) {
        $(this).put_element();
    }
});

$.fn.put_element = function () {
    $this = $(this).attr('class').split(" ");
    $this = $this[0];
    $("#" + $this + "").droppable({
        accept: "." + $this + "",
        drop: function (event, ui) {
            alert('OK');
        }
    })
}

CSS

        #a1_73 {
        width: 362px;
        height: 295px;
        margin-left: 748px;
        margin-top: 314px;
        position: absolute;
    }
    #a2_73 {
        width: 318px;
        height: 213px;
        margin-left: 421px;
        margin-top: 188px;
        position: absolute;
    }
    #a3_73 {
        width: 360px;
        height: 243px;
        margin-left: 23px;
        margin-top: 367px;
        position: absolute;
    }
    #a4_73 {
        width: 396px;
        height: 199px;
        margin-left: 19px;
        margin-top: 50px;
        position: absolute;
    }
    .a1_73 {
        margin: 162px 0px 0px 858px;
        position: absolute;
    }
    .a2_73 {
        margin: 97px 0px 0px 759px;
        position: absolute;
    }
    .a4_73 {
        margin: 33px 0px 0px 634px;
        position: absolute;
    }
    .a3_73 {
        margin: 231px 0px 0px 853px;
        position: absolute;
    }
    div {
        background-color: red;
    }
    .dragme {
        width: 100px;
        height: 100px;
        background-color: black;
        color: #fff;
    }

JSFiddle

【问题讨论】：

请发布一个 sn-p（使用编辑器上的按钮）而不是指向 jsfiddle 的链接。
有什么错误吗？应该怎么办？你的问题在哪里？
没有错误，根本不起作用。
Whick $(this) 您计划在您的可拖动元素中使用.. 从逻辑上讲，可放置元素在您使其可放置之前如何知道可拖动元素？ ..请尝试阅读Documentation以正确使用它..祝你好运
拖放操作在为拖动元素添加边距之前效果更好。当我想使用左/上边距在页面上设置拖动元素时出现问题。

标签： javascript jquery user-interface

【解决方案1】：

试试这个。

HTML

<div id="a1_73" class="empty">#A1</div>
<div id="a2_73" class="empty">#A2</div>
<div id="a3_73" class="empty">#A3</div>
<div id="a4_73" class="empty">#A4</div>

<div class="a1_73 dragme">.A1</div>
<div class="a2_73 dragme">.A2</div>
<div class="a3_73 dragme">.A3</div>
<div class="a4_73 dragme">.A4</div>

$(".dragme").draggable({
        start: function (event, ui) {
            $(this).put_element();
        }
    });

    $.fn.put_element = function () {
        $this = $(this).attr('class').split(" ");
        $this = $this[0];
        $("#" + $this + "").droppable({
            accept: "." + $this + "",
            drop: function (event, ui) {
                alert('OK');
            }
        })
    }

CSS

    #a1_73 {
    width: 362px;
    height: 295px;
    margin-left: 748px;
    margin-top: 314px;
    position: absolute;
}
#a2_73 {
    width: 318px;
    height: 213px;
    margin-left: 421px;
    margin-top: 188px;
    position: absolute;
}
#a3_73 {
    width: 360px;
    height: 243px;
    margin-left: 23px;
    margin-top: 367px;
    position: absolute;
}
#a4_73 {
    width: 396px;
    height: 199px;
    margin-left: 19px;
    margin-top: 50px;
    position: absolute;
}
.a1_73 {

    position: absolute;
}
.a2_73 {

    position: absolute;
}
.a4_73 {

    position: absolute;
}
.a3_73 {

    position: absolute;
}
div {
    background-color: red;
}
.dragme {
    width: 100px;
    height: 100px;
    background-color: black;
    color: #fff;
}

【讨论】：

谢谢，但您只是从元素中删除边距。
是的，它正在工作，但我需要设置边距，你只需删除它们。

【解决方案2】：

所以，我将所有 .a1_73、.a2_73、.a3_73、.a4_73 放入 DIV.holder，将持有人向右移动，将内部每个元素的边距更改为更小，这样就可以了。

.a1_73、.a2_73、.a3_73、.a4_73 的边距不能大于 100px。

【讨论】：