Jquery UI - Droppable包装器中的droppable块

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/

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


}