什么甚至在可拖动的可拆卸物上掉落时会发生什么?

时间:2012-06-12 10:45:38

标签: jquery

以下代码(fiddle):

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
    <div class="myDivs">Hello 05</div>
    <div class="myDivs excludeThisCss">Hello 06</div>
    <div class="myDivs">Hello 07</div>
    <div class="myDivs">Hello 08</div>
    <div class="myDivs excludeThisCss">Hello 09</div>
    <div class="myDivs">Hello 10</div>
</div>

<div class="connected">
    <div class="myDivs">Hello 01</div>
    <div class="myDivs">Hello 02</div>
    <div class="myDivs excludeThisCss">Hello 03</div>
    <div class="myDivs">Hello 04</div>
    <div class="myDivs">Hello 05</div>
    <div class="myDivs excludeThisCss">Hello 06</div>
    <div class="myDivs">Hello 07</div>
    <div class="myDivs">Hello 08</div>
    <div class="myDivs excludeThisCss">Hello 09</div>
    <div class="myDivs">Hello 10</div>
</div>

JS:

$(function() {
    $( ".connected" ).sortable({
        connectWith : ".connected",
        items       : ".myDivs:not(.excludeThisCss)"
    }).disableSelection();

});​

CSS:

.connected {
    float: left;
    margin: 6px;
}
.myDivs {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    font-family: sans-serif;
    width: 120px;
    background: #F2F2F2;
    cursor: pointer;
    border: 1px solid #D9D9D9;
    color: #1C94C4;
}
.excludeThisCss {
    background: pink;
}
​
​

我正在尝试在项目拖动时执行代码&amp;下降。是否有一个事件在可拆卸的可拖动物上被触发?

1 个答案:

答案 0 :(得分:0)

是的,您可以使用stop事件:

stop: function(event, ui) { ... }

Updated jsfiddle heredocs for the event are here

ui对象包含以下内容:

  • ui.helper - 当前帮助元素(通常是项目的克隆)
  • ui.position - 帮助者的当前位置
  • ui.offset - 当前帮助者的绝对位置
  • ui.item - 当前拖动的元素
  • ui.placeholder - 占位符(如果您定义了一个)
  • ui.sender - 项目来源的可排序方式(仅当您从一个连接列表移动到另一个连接列表时才存在)