我刚刚制作了一个脚本，在其中拖放一个无序列表。
这是我的例子（JSFiddle）：
Javascript：
var dragSrcEl=null;
function handleDragStart(e){
this.style.opacity=0.4; // this / e.target is the source node.
//Calling e.dataTransfer.setData(format, data) will set the object's content to the mimetype and data payload passed as arguments.
dragSrcEl=this;
e.dataTransfer.effectAllowed='move';
e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e){
if(e.preventDefault){
e.preventDefault();// Necessary. Allows us to drop.
}
e.dataTransfer.dropEffect='move'; // See the section on the DataTransfer object.
return false;
}
function handleDragEnter(e){
// this / e.target is the current hover target.
this.classList.add('over');
}
function handleDragLeave(e){
// this / e.target is the previous hover target.
this.classList.remove('over');
}
function handleDrop(e){
//this //e.target is current target element
if(e.stopPropagation){
e.stopPropagation; //stops the browser from redirecting
}
// Don't do anything if dropping the same column we're dragging.
if(dragSrcEl!=this){
// Set the source column's HTML to the HTML of the column we dropped on.
dragSrcEl.innerHTML=this.innerHTML;
this.innerHTML=e.dataTransfer.getData('text/html');
}
//see the section on the DataTransfer
return false;
}
var cols=document.querySelectorAll('#apps_list .column');
function handleDragEnd(e){
//this /e.target is the source node;
[].forEach.call(cols, function(col){
col.classList.remove('over');
});
}
[].forEach.call(cols, function(col){
col.addEventListener('dragstart', handleDragStart, false);
col.addEventListener('dragenter', handleDragEnter, false)
col.addEventListener('dragover', handleDragOver, false);
col.addEventListener('dragleave', handleDragLeave, false);
col.addEventListener('drop', handleDrop, false);
col.addEventListener('dragend', handleDragEnd, false);
});
CSS：
/* Prevent the text contents of draggable elements from being selectable. */
[draggable] {
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element;
}
/** apps box **/
div.apps_box{
/*margin: 0 1em;*/
padding: 3px;
position: relative;
width: 100%;
/*height: 100%;*/
/*top: 10em;*/
right: .6em;
}
div.apps_box > ul#apps_list{
/*height: 100%;*/
width: 100% !important;
}
div.apps_box > ul#apps_list > li{
display: inline-block;
width: 130px;
height: 130px;
text-align: center;
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
font-size: 1em;
background: #009ae1;
margin: .1em;
position: relative;
cursor: move;
}
div.apps_box > ul#apps_list > li > span{
width: 130px;
height: 130px;
position: relative;
display: inline-block;
text-align: center;
margin: 0 auto;
padding: 0;
}
ul#apps_list > li > span > p{
opacity: 0;
width: 125px;
position: relative;
left:.2em;
top: 0;
color: #fff;
font-family: 'Open Sans Condensed', sans-serif;
margin: 0;
text-align: left;
/** transition to make it fadeout after 1s **/
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
transition: all 1s ease-out;
/** animation after mouse out **/
-webkit-animation: animeitback 2s;
-moz-animation: animeitback 2s;
animation: animeitback 2s;
/** animation fill **/
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
animation-fill-mode: both;
}
ul#apps_list > li > span > a{
text-decoration: none;
text-transform: none;
color: #ddd;
width: 130px;
position: relative;
left:0;
top: 0;
}
div.apps_box ul#apps_list .over{
border: 2px dashed #000;
opacity: 0.4;
}
HTML:
<div class="apps_box">
<ul id="apps_list" class="menu apps_list">
<!-- row one -->
<li class="column" draggable="true">
<span>
<a href="#">Skype</a>
<p>Skype is and app to chat with your friends</p>
</span>
</li>
<li class="column" draggable="true">
<span>
<a href="#">Gmail</a>
<p>Never let your news away get to know</p>
</span>
</li>
<li class="column" draggable="true">
<span>
<a href="#">VoiceMail</a>
<p>Make it live and give it a life</p>
</span>
</li>
<li class="column" draggable="true">
<span>
<a href="#">Facebook</a>
<p>Make it live and give it a life</p>
</span>
</li>
<li class="column" draggable="true">
<span>
<a href="#">Viber</a>
<p>Make it live and give it a life</p>
</span>
</li>
<li class="column" draggable="true">
<span>
<a href="#">Phone</a>
<p>Make it live and give it a life</p>
</span>
</li>
</ul>
</div>
问题是，当我完成拖放时，事件handleDragEnd似乎不起作用，并且不透明度停留在0.4。
问题已解决，更改：
Javascript：
function handleDragEnter(e){
// this / e.target is the current hover target.
this.classList.add('over');
this.style.opacity=0.4; //adding the opacity here fixed the problem for the Drag enter
}
function handleDragEnd(e){
//this /e.target is the source node;
[].forEach.call(cols, function(col){
col.classList.remove('over');
col.style.opacity = 1; //adding opacity here resets the opacity after the end of the drop
});
}
CSS：
div.apps_box ul#apps_list .over{
border: 2px dashed #000; //removing opacity from here helped to fix the problem, because adding it here is the same as adding it on the start handler.
}
谢谢大家。
不透明度保持在0.4，因为您没有将其更改为1像这个一样在handleDragEnd函数中添加col.style.opacity = 1
function handleDragEnd(e){
//this /e.target is the source node;
[].forEach.call(cols, function(col){
col.classList.remove('over');
col.style.opacity = 1; // reset opacity here
});
}