对于拖放,您必须执行以下步骤:
1) 包括最新的 JQuery 和 JQuery UI javascript 文件以及包括 JQuery UI CSS
2)编写HTML:
<div id="demo-frame">
<div class="demo">
<div id="draggable" class="ui-widget-content ui-draggable">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header ui-droppable">
<p>Drop here</p>
</div>
</div>
</div>
3)应用CSS:
#demo-frame {
border: 1px solid #DDDDDD;
clear: right;
height: 300px;
overflow: auto;
position: relative;
width: 520px;
}
#demo-frame .demo {
padding: 5px;
}
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
.ui-widget-content {
background: url("http://jqueryui.com/themeroller/images/?new=eeeeee&w=1&h=100&f=png&q=100&fltr[]=over|textures/03_highlight_soft.png|0|0|100") repeat-x scroll 50% top #EEEEEE;
border: 1px solid #DDDDDD;
color: #333333;
}
4)编写jQuery脚本:
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
我在http://codebins.com/codes/home/4ldqpdd上创建了用于拖放的垃圾箱