var dragElements = document.querySelectorAll('#drag-elements li'); var elementDragged = null; for (var i = 0; i < dragElements.length; i++) { dragElements[i].addEventListener('dragstart', function (e) { e.dataTransfer.setData('text', this.id); elementDragged = this; }); dragElements[i].addEventListener('dragend', function (e) { elementDragged = null; }); dragElements[i].addEventListener('dragover', function (e) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; elementDragged.setAttribute('class', 'dragStart'); return false; }); dragElements[i].addEventListener('dragenter', function(e) { e.preventDefault(); e.stopPropagation(); if (this.id != elementDragged.id) { var tempInnerHtml = this.innerHTML; this.innerHTML = elementDragged.innerHTML; elementDragged.innerHTML = tempInnerHtml; elementDragged.removeAttribute('class'); elementDragged = this; } }); dragElements[i].addEventListener('dragleave', function(e) { e.preventDefault(); e.stopPropagation(); if (this.id != elementDragged.id) { this.removeAttribute('class'); } }); dragElements[i].addEventListener('drop', function (e) { e.preventDefault(); e.stopPropagation(); var targetId = e.dataTransfer.getData('text'); //测试用,可以用 e.dataTransfer 可以在被拖动元素与目标元素之间传送信息,chrome下暂时有bug,在dragover、dragleave、dragenter中无法获取 elementDragged.removeAttribute('class'); return false; }); };
<ul id="drag-elements"> <li id="A" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_baidu.jpg" alt="" /></li> <li id="B" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_163.jpg" alt="" /></li> <li id="C" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_iqiyi.jpg" alt="" /></li> <li id="D" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_qq.jpg" alt="" /></li> <li id="E" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_weibo.jpg" alt="" /></li> <li id="F" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_taobao.jpg" alt="" /></li> <li id="G" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_youku.jpg" alt="" /></li> <li id="H" draggable="true"><img src="http://images.cnblogs.com/cnblogs_com/jscode/556652/o_hao123.jpg" alt="" /></li> </ul>
ul { margin:20px auto; width:800px; zoom:1; } ul:after{ content:"."; display:block; font-size:0; line-height:0; clear:both; visibility:hidden; } li { width:200px; height:125px; float:left; background-color:#CCC; text-align:center; line-height:120px; font-size:50px; color:#F60; } .dragStart img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }