java se拖动插件_jquery拖动插件(jquery.drag)使用介绍

jQuery Dynamic Drag'n Drop

body {

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

margin-top: 10px;

}

ul {

margin: 0;

}

#contentWrap {

width: 700px;

margin: 0 auto;

height: auto;

overflow: hidden;

}

#contentTop {

width: 600px;

padding: 10px;

margin-left: 30px;

}

#contentLeft {

float: left;

width: 400px;

}

#contentLeft li {

list-style: none;

margin: 0 0 4px 0;

padding: 10px;

background-color:#00CCCC;

border: #CCCCCC solid 1px;

color:#fff;

}

#contentRight {

float: right;

width: 260px;

padding:10px;

background-color:#336600;

color:#FFFFFF;

}

$(document).ready(function(){

$(function() {

$("#contentLeft ul").sortable({ opacity: 0.5, cursor: 'move', update: function() {

var id="";

$("ul.ui-sortable li").each(function(){

id+=$(this).attr("id")+"
";

})

$("#contentRight").html(id);

}

});

});

});

• 3. Returned array can be found at the right
• 2. Dragging changes the opacity of the item
• 1. Once dropped, an Ajax query is activated
• 4. It is very very easy
• 5. It is very very easy
• 6. It is very very easy
• 7. It is very very easy

demo地址