@TedZhou
2015-08-22T10:17:19.000000Z
字数 2092
阅读 376
技术
html
javascript
之前,想在浏览器中实现拖放似乎很困难,现在有了HTML5就简单了。下面实现一个例子:简单的拖拽排序。
页面使用bootstrap
展示几张图片(缩略图)
注:省略号部分表示你可以自己在div.row下复制更多个div.thumbnail
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop sample</title>
<link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="thumbnail col-sm-6 col-md-4">
<img class="img-responsive" src="img1.png">
<div class="caption text-center"><h5>Image1</h5></div>
</div>
<div class="thumbnail col-sm-6 col-md-4">
<img class="img-responsive" src="img2.png">
<div class="caption text-center"><h5>Image2</h5></div>
</div>
<!-- ...... -->
</div>
</div>
<script src="http://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="DragDrop.js"></script>
</body>
</html>
注:脚本依赖的jquery已经在页面里引入。
$(function(){
//拖拽的对象是这些缩略图
var dragable = '.thumbnail';
var $dragable = $(dragable);
//设置可拖拽属性
$dragable.attr('draggable', true);
//响应开始拖拽事件
$dragable.on('dragstart', setDragData);
//拖放的目标也是这些缩略图
var $dropable = $dragable;
//让目标允许拖放
$dropable.on('dragover', allowDrop);
//响应拖放事件
$dropable.on('drop', dropDragData);
//开始拖拽事件处理
function setDragData(e){
var $target = getDragable(e.target);
//传递被拖拽对象的位置索引
e.originalEvent.dataTransfer.setData("text",$target.index());
}
function allowDrop(e){
e.preventDefault();//这样就能允许拖放
}
//拖放事件处理:把被拖拽对象放到目标对象所在的位置,即实现拖拽排序。
function dropDragData(e){
e.preventDefault();//阻止默认的放置行为
var $target = getDragable(e.target);
var dragIdx = e.originalEvent.dataTransfer.getData("text");
if (dragIdx !== $target.index()){
var $draged = $(dragable).eq(dragIdx);
if ($draged.index() > $target.index()){
$target.before($draged);//向前拖:放在目标对象的前面
}else{
$target.after($draged);//向后拖:放在目标对象的后面
}
}
}
//获取可拖拽对象
function getDragable(dom){
var $dragable = $(dom);
if (!$dragable.is(dragable)){
//拖拽子元素时定位到父元素
$dragable = $dragable.closest(dragable);
}
return $dragable;
}
});
上例的拖放效果在最新的Chrome
、IE
、QQ浏览器
下测试了都很正常,但在FireFox
下拖放图片会激活一个新的页签(有人说使用e.preventDefault()
可以解决,但我试了没有效果)。