下面是HTML
<ul>
<li>
<a href="#" class="item" id="1">String</a>
</li>
<li>
<a href="#" class="item" id="2">Int</a>
</li>
</ul>
<div class="cart">
</div>
這裏是Java腳本,使元素能夠拖動和刪除,並能得到下降元素的ID
$(function() {
$('.item').draggable({
revert: true,
proxy: 'clone',
onStartDrag: function() {
$(this).draggable('options').cursor = 'not-allowed';
$(this).draggable('proxy').css('z-index', 10);
},
onStopDrag: function() {
$(this).draggable('options').cursor = 'move';
}
});
$('.cart').droppable({
onDragEnter: function (e, source) {
$(source).draggable('options').cursor = 'auto';
},
onDragLeave: function (e, source) {
$(source).draggable('options').cursor = 'not-allowed';
},
onDrop: function (e, source) {
var id=source.id;
// this var id lets you know that which item has been dropped into the cart div ..
//you can implement the remaining functionality according to your requirement.
if(id==1)
{
//Load String Image
}
else if(id==2)
{
//Load Int Image
}
}
});
});