在没有drag事宜的时刻，做元素拖拽运用的都是mouse事宜，但mouse在处置惩罚过程当中可能有如许或那样的题目，重要照样觉得不流通，假如小伙伴们不在斟酌低版本IE(<IE9)的话，能够偿试一下drag，会有意想不到的收成。。
下面来展现下drap的重要事宜
在拖动目的上触发事宜 (源元素):
ondragstart – 用户最先拖动元素时触发
ondrag – 元素正在拖动时触发
ondragend – 用户完成元素拖动后触发
开释目的时触发的事宜:
ondragenter – 当被鼠标拖动的对象进入其容器范围内时触发此事宜
ondragover – 当某被拖动的对象在另一对象容器范围内拖动时触发此事宜
ondragleave – 当被鼠标拖动的对象脱离其容器范围内时触发此事宜
ondrop – 在一个拖动过程当中，开释鼠标键时触发此事宜
dataTransfer对象(相识就好了)：
dropEffect 设置放下结果（copy move link none）
effectAllowed 许可的结果 (copy move link copyLink copyMove linkMove all
none uninitialized(默许值，等同于all))files FileList对象
setDragImage()
setData()
getData()
clearData()
演示结果
HTML:
<div class="box">
<ul>
<li id="li1" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">题目一</li>
<li id="li2" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">题目二</li>
<li id="li3" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">题目三</li>
<li id="li4" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">题目四</li>
<li id="li5" draggable="true" ondragstart="dragstart(event)" ondragend="dragend(event)">题目五</li>
</ul>
</div>
<div class="box">
<ul ondrop="drop(event)" ondragenter="dragenter(event)" ondragover="dragover(event)" ondragleave="dragleave(event)">
</ul>
</div>JS:
<script>
var $ = document.querySelectorAll.bind(document);
// 最先拖拽元素
function dragstart(e) {
e.dataTransfer.setData('li',e.target.id);
console.log('%c 1、最先拖拽(dragstart)', 'color: green;')
}
// 拖拽元素进入目的窗器
function dragenter(e) {
console.log('%c 2、拖拽元素进入目的窗器(dragenter)', 'color: orange;')
}
// 拖拽元素悬浮目的窗器上
function dragover(e) {
e.preventDefault();
$('.box')[1].style.border = '1px dashed red';
console.log('%c 3、拖拽元素悬浮目的窗器上(dragover)', 'color: red;')
}
// 拖拽元素脱离目的窗器
function dragleave(e) {
$('.box')[1].style.border = 'none';
console.log('%c 4、拖拽元素脱离目的窗器(dragleave)', 'color: black;')
}
// 放下拖拽元素
function drop(e) {
e.preventDefault();
var li = e.dataTransfer.getData('li');
if(e.target.nodeName === 'UL') {
e.target.appendChild(document.getElementById(li));
} else {
liNode = document.getElementById(li);
e.target.parentNode.insertBefore(liNode, e.target);
}
$('.box')[1].style.border = 'none';
console.log('%c 5、放下拖拽元素(drop)', 'color: blue;')
}
// 完成拖拽
function dragend(e) {
console.log('%c 6、完成拖拽(dragend)', 'color: gray;')
}
</script>在dragover和drop环节上阻挠默许事宜(e.preventDefault())是少不了的，，不信的少侠能够尝试一下，以来印证老汉所言非虚。。。哈哈哈，偏偏然，隐身山林中……
控制台打印
示例
完全代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动</title>
<script src="jquery.min.js"></script>
<script>
var log = console.log.bind(console);
</script>
</head>
<body>
<style>
*{margin: 0;padding: 0;list-style: none;}
.list li{float: left;height: 36px;padding: 0 10px;margin: 10px 0 0 10px;border: 1px solid #ddd;line-height: 36px;}
.list .active{border-color: green;color: green;}
.list .dashed{display: none;border-style: dashed;}
.list .num{margin-right: 5px;}
</style>
<ul class="list">
<li class="dashed" ondrop="drop(event)" data-order="0"></li>
<li class="active" draggable="true" data-order="1"><span class="num">1</span><label><input type="checkbox" checked="checked">天天向上1</label></li>
<li class="active" draggable="true" data-order="2"><span class="num">2</span><label><input type="checkbox" checked="checked">天天向上22</label></li>
<li class="active" draggable="true" data-order="3"><span class="num">3</span><label><input type="checkbox" checked="checked">天天向上333</label></li>
<li data-order="4"><span class="num">4</span><label><input type="checkbox">天天向上4444</label></li>
<li data-order="5"><span class="num">5</span><label><input type="checkbox">天天向上55555</label></li>
<li class="active" draggable="true" data-order="6"><span class="num">6</span><label><input type="checkbox" checked="checked">天天向上666666</label></li>
<li data-order="7"><span class="num">7</span><label><input type="checkbox">天天向上7777777</label></li>
<li data-order="8"><span class="num">8</span><label><input type="checkbox">天天向上88888888</label></li>
<li data-order="9"><span class="num">9</span><label><input type="checkbox">天天向上999999999</label></li>
</ul>
<script>
var dragEleWth; // 拖动元素宽度
$('.list li').click(function(e) { // 勾选
e.preventDefault();
if($(this).hasClass('active')) {
$(this).removeClass('active').removeAttr('draggable').find(':checkbox').prop('checked', false);
} else {
$(this).addClass('active').attr('draggable', true).find(':checkbox').prop('checked', true);
}
}).on('dragstart', function(e) { // 拖动元素
dragEleWth = $(this).width();
e.originalEvent.dataTransfer.setData('order', +$(this).data('order'));
}).on('dragover', function(e) { // 拖动悬浮
e.preventDefault();
if($(this).hasClass('active')) {
$('.list .dashed').show().width(dragEleWth);
$(this).before($('.list .dashed'));
}
});
// 放下
function drop(e) {
e.preventDefault();
var order = e.dataTransfer.getData('order');
var dashedLi = $('.list .dashed');
dashedLi.before($('[data-order="'+order+'"]'));
dashedLi.hide().removeAttr('style');
$('.list').prepend(dashedLi);
$('.list li').each(function(i) {
$(this).attr('data-order', i).children('.num').text(i);
});
}
</script>
</body>
</html>最后向人人引荐一个拖动插件 http://dragsort.codeplex.com/ 用过觉得还不错
