HTML5拖放與只有JavaScript

我試圖使用事件委託，拖放和只有JavaScript。

當我從sourceContainer ....中雙擊項目1後，該項目將在destinationContainer中創建。這裏沒問題。

但是，當我嘗試拖動destinationContainer中的新項目時，我無法設置所選div的頂部和左側樣式。 event.target.id或this.id總是相同的。我期望id爲1，這是爲destinationContainer中存在的div創建的新ID。

任何人都可以幫助我瞭解如何才能夠更改只在destinationContainer中創建的div的頂部和左側樣式。

這裏是一個小提琴：https://jsfiddle.net/mdevera/oys3tLww/1/

這裏是降功能：

function drop(event) { 

console.log("event.target.id: " + event.target.id); 
console.log("this.id: " + this.id); 

// This does not allow me to set the selected div's appropriate top and left styles. 
// I do not want the whole destinationContainer to not move. Just the selected child element. 

// var offset = event.dataTransfer.getData("text/plain").split(','); 
// 
// this.style.top = (event.clientY + parseInt(offset[0], 10)) + 'px'; 
// this.style.left = (event.clientX + parseInt(offset[1], 10)) + 'px';

}

來源

2017-01-17 M_devera

/*Drag and Drop events*/ 
var source; 
var before; 
function isbefore(a, b) { 
    if (a.parentNode == b.parentNode) { 
     for (var cur = a; cur; cur = cur.previousSibling) { 
      if (cur === b) { 
       return true; 
      } 
     } 
    } 
    return false; 
} 

function dragenter(e) { 
    before =isbefore(source, e.target); 
    if (before) { 
     e.target.parentNode.insertBefore(source, e.target); 
    } else { 
     e.target.parentNode.insertBefore(source, e.target.nextSibling); 
    } 
} 
function dragstart(e) { 
    source = e.target; 
    e.dataTransfer.effectAllowed = 'move'; 
    e.dataTransfer.setData("Text", source.getAttribute('id')); 
    return true; 
} 
function dragDrop(e) { 
    var source = e.dataTransfer.getData("Text"); 
    if (!before) { 
     ev.target.appendChild(document.getElementById(src)); 
    } 
    ev.stopPropagation(); 
return false; 
}

來源

2017-01-17 07:03:27

希望幫助 –

我沒有使用你的例子一字不差。但是，我確實將源設置爲選定的li。出於某種原因，放置事件處理程序會將選定元素設置爲父容器（例如destinationContainer）。這意味着你不能使用this或event.target來確定選擇了哪個li元素。因此，我在drag_start函數中將source的值設置爲event.target。這就允許我在拖放功能中正確設置偏移集。 –

<body> 

<div class="dropdown"> 

    <button class="btn btn-primary dropdown-toggle" 
      type="button" id="dropdownMenu1" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
     Border-style 
     <span class="caret"></span> 
    </button> 

    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <li><a href="#" id="border-solid" onClick="return_id(this.id)">Solid</a></li> 
     <li><a href="#" id="border-dashed" onClick="return_id(this.id)">Dashed</a></li> 
     <li><a href="#" id="border-dotted" onClick="return_id(this.id)">dotted</a></li> 
    </ul> 
</div> 


<center><input type="text" id="text1" onClick="ele_id(event)"/></center> 
<center><input type="text" id="text2" onClick="ele_id(event)"/></center> 

<center><input type="text" id="text5" onClick="ele_id(event)"/></center>

來源

2017-01-17 07:06:49

在Javascript

純粹。主要是玩mouseup，mousedown和mousemove事件來模擬拖放。使用偏移量播放以獲得拖動對象的鼠標光標所需的偏移量。

在整頁中運行代碼片段以獲得更好的視圖。滾動阻力是敵人的拖放

var elements=document.getElementsByClassName("item"); 
 
var dest=document.getElementById("dest"); 
 

 

 
var drag=false; 
 
var tempObj=null; //active object to drag 
 

 
//add events to item class 
 
for(obj of elements) 
 
{ 
 
\t obj.addEventListener('mousedown',function dragInitiate() 
 
    { 
 
    \t drag=true; 
 
    tempObj=this; 
 
    
 
    }); 
 
    
 
    
 
} 
 
document.addEventListener('mouseup',function dragInitiate(e) 
 
    { 
 
    \t drag=false; 
 
    if(tempObj!=null) 
 
    { 
 
    \t if(itemInsideDestination(tempObj,e)==true) 
 
     { 
 
     tempObj.innerHTML="Success!!!"; 
 
     dest.appendChild(tempObj); 
 
     tempObj.style.position="relative"; 
 
     tempObj.style.left="0px"; 
 
     tempObj.style.top="0px"; 
 
     
 
     
 
     
 
     }else 
 
     { 
 
      
 
      tempObj.style.left="0px"; 
 
      tempObj.style.top="0px"; 
 
     } 
 
     
 
    } 
 
    }); 
 
document.addEventListener('mousemove',function dragStop(e) 
 
    { 
 
    \t if(drag==true && tempObj!=null) 
 
    { 
 
     //play with offset to get accurate position of item with mouse cursor 
 
     var offset=100; 
 
    \t tempObj.style.left=(e.clientX)+"px"; 
 
     tempObj.style.top=(e.clientY-offset)+"px"; 
 
     if(itemInsideDestination(tempObj,e)==true) 
 
     { 
 
     tempObj.innerHTML="I am inside Destination"; 
 
     }else 
 
     { 
 
      tempObj.innerHTML="Do not Drop me!!!"; 
 
     } 
 
    } 
 
    \t 
 
    }); 
 

 
function itemInsideDestination(obj,e) 
 
{ 
 
\t var mx=e.clientX,my=e.clientY; 
 
    var itemRect=obj.getBoundingClientRect(); 
 
    var destRect=dest.getBoundingClientRect(); 
 
    
 
    if((itemRect.left+itemRect.width)>=destRect.left && (itemRect.left+itemRect.width)<=destRect.left+destRect.width) 
 
    { 
 
    if((itemRect.top)>=destRect.top && (itemRect.top)<=destRect.top+destRect.height) 
 
    { 
 
    \t //console.log('box inside'); 
 
    return true; 
 
    } 
 
    } 
 
    
 
    
 
}

#source 
 
{ 
 
    
 
border:1px solid gray; 
 
height:200px; 
 
width:200px; 
 
} 
 
#dest 
 
{ 
 
    
 
border:1px solid gray; 
 
height:200px; 
 
width:400px; 
 
} 
 
.item 
 
{ 
 
    background-color:lightblue; 
 
    width:200px; 
 
    height:30px; 
 
    position:relative; 
 
    border:1px solid gray; 
 
    cursor:move; 
 
} 
 
.inDest 
 
{ 
 
    background-color:lightblue; 
 
    width:200px; 
 
    height:30px; 
 
    position:relative; 
 
    border:1px solid gray; 
 
    left:0px; 
 
    top:0px; 
 
} 
 
.item:active 
 
{ 
 
    border:1px solid blue; 
 
}

<p>Source</p> 
 
<div id="source"> 
 
    <div class="item">Item1</div> 
 
    <div class="item">Item2</div> 
 
    <div class="item">Item3</div> 
 
    <div class="item">Item4</div> 
 
    
 
</div> 
 
<p>Destination</p> 
 
<div id="dest"> 
 
    
 
</div>

來源

2017-01-17 08:35:20

HTML5拖放與只有JavaScript

回答

相關問題