jQuery UI - 可拖拽块嵌套在可拖拽包装器内

Question

我很困惑。我希望能够在可放置的包装器内，将jQuery UI块拖动到可放置的div中。

我需要获取块被放置的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/

- v1r00z

---

找到解决方案：贪心算法：真。 - v1r00z

发布解决方案，这样如果有人来到这里，他们就可以从你学到的东西中受益。 - PseudoNinja

将贪婪选项设为真。http://jsfiddle.net/J7azG/40/ - v1r00z

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


}

- Radulescu Alexandru