Jquery UI - 可放置包装器内的可放置 block

Question

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

我需要获取正在删除 block 的 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;
}


}