Jquery UI - 可放置包装器内的可放置块答案

【问题标题】：Jquery UI - Droppable block inside droppable wrapperJquery UI - 可放置包装器内的可放置块
【发布时间】：2011-11-11 06:22:13
【问题描述】：

我真的被困住了。我希望能够在可放置包装器内的可放置 div 中拖动 jQuery UI 块。

我需要获取正在删除块的 div 的 id。

js：

$( ".wrapper" ).droppable({

            drop: function( event, ui ) {
                alert('dropped in the wrapper');
            }

        });
$( ".inside" ).droppable({

            drop: function( event, ui ) {
                alert('dropped inside');
            }

        });
$( ".outSide" ).droppable({

            drop: function( event, ui ) {
                alert('dropped OutSide');
            }

        });
$( ".block" ).draggable();

CSS：

.wrapper {
    width:200px;
    height:250px;
    background-color:#0f0;
    text-align:center;
    line-height:200px;
    vertical-align:middle;
}

.inside {
    display:inline-block;
    vertical-align:middle;
    width:100px;
    height:110px;
    border:1px solid #000;

}
.outSide {
    display:inline-block;
    width:100px;
    height:200px;
    position:relative; 
    float:left;
    left:240px;
    top:40px;
    border:1px solid #000;

}

.block {
    width:80px;
    height:30px;
    background-color:#00f;
    display:inline-block;
}

HTML：

<div class="wrapper">
    Wrapper
    <div class="inside">
        Inside
    </div>
</div>
       <div class="outSide">
       Outside
    </div>
<br /><br />

        <div class="block"></div>

<br /><br />

JSFiddle：http://jsfiddle.net/J7azG/23/

【问题讨论】：

找到解决方案：greedy: true
发布解决方案，这样如果有人在这里结束，他们可以从你学到的东西中受益。
将贪心选项设置为真。 jsfiddle.net/J7azG/40

标签： jquery jquery-ui jquery-ui-draggable

【解决方案1】：

您需要为所有 div 触发一个通用函数。例如：

  $( ".wrapper" ).droppable({
            drop: handleDrop
        });
$( ".inside" ).droppable({

            drop: handleDrop

        });
$( ".outSide" ).droppable({

            drop:handleDrop

        });
$( ".block" ).draggable();

function handleDrop(event,ui)
{
  switch $(this).attr("id"){
  case "...":   break;
  case "....":  break;
  default: break;
}


}

【讨论】：