Question

这很简单......拖放区域。但是当我将 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

RK

Answer 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>

JS

$(".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;
}

Answer 2

所以，我将所有.a1_73，.a2_73，.a3_73，.a4_73放入DIV.holder，将持有者移到右边，将边距更改为内部每个元素的较小部分，并且它可以正常工作。

.a1_73，.a2_73，.a3_73，.a4_73的保证金不能高于100px。

jQuery UI，Droppable - 为什么这不起作用

2 个答案: