html页面拖拽自定义布局,如何使用HTML5+CSS3+jquery 实现用户拖拽自定义界面

html>

简单的拖拽

*{ padding:0;margin:0;font-size:12px; }

.list{ width:360px;height:230px;background-color:#eee;margin:24px auto; }

.list .listview{ width:98px;height:98px;border:1px solid #555;margin:10px 0 0px 15px;float:left;position:relative;user-select:none; }

.list .spots{ padding:0 5px;cursor:pointer;position:absolute;left:0;top:0; }

.list .cont{ position:absolute;right:5px;top:0; }

…

1

…

2

…

3

…

4

…

5

…

6

$(function(){

$('.spots').bind('dragstart', function(e){

e.originalEvent.dataTransfer.setData( "m_data", $(this).parent().index() );

});

$('.list').bind('dragover', function(e){

e.preventDefault();

});

$('.listview').bind('drop', function(e){

e.preventDefault();

var p_index = e.originalEvent.dataTransfer.getData("m_data");

var p_index_this = $(this).index();

if( p_index > p_index_this ){

$('.listview').eq(p_index_this).before($('.listview').eq(p_index));

}else{

$('.listview').eq(p_index_this).after($('.listview').eq(p_index));

}

});

});