div元素的拖放

我在頁面上有一個矩形的div元素，裏面有圖像和文本。 Div有2px邊框，使其實際可見。div元素的拖放

然後我將dragstart事件監聽器添加到我的div元素。如果我開始拖動div內的圖像，dragstart事件始終會觸發，但如果我通過單擊文本跨度或空白處開始拖動，則會出現問題：

在Google Chrome中，拖動非常不穩定。它可以工作幾次然後停止射擊，然後再次工作等等。在Mozilla Firefox中，它根本不起作用。

如何解決它，並允許通過點擊我的div綁定矩形內的任何點拖動？

<div class="item"> 
    <img src="https://www.wigwam3d.com/previews/1f/1ffbf8da-a4d0-4e40-b9e1-0329220969dc.jpg"> 
    <div>Element</div> 
</div>

Plunker：http://plnkr.co/edit/673ytif50cViE5dTv3df?p=preview

來源

2017-06-09 Rem

你對我們有一些代碼嗎？ –

當你詢問時顯示你的代碼.. – Rifai

代碼和任何控制檯消息將桃色 - 你被寵壞了你的最後兩個問題，沒有代碼，只有外部鏈接，當然你知道SO現在如何工作，現在超過50個問題 –

剛剛發現一個簡單的解決方案：添加屬性拖動=真div元素上！就這樣！

來源

2017-06-09 09:21:18 Rem

使用此代碼，你可以拖動窗口的div任何地方。還要修復div的寬度和高度。。

$（函數（）{ $（「＃動畫」）的CSS（{ 「光標」：「移動」}）

// mousedown:fn(){dragging = true;} 


var dragging = false; 
var iX, iY; 
$("#animation").mousedown(function(e) { 
    dragging = true; 
    iX = e.clientX - this.offsetLeft; 
    iY = e.clientY - this.offsetTop; 
    this.setCapture && this.setCapture(); 
    return false; 
}); 

// mouseover:fn(){dragging = tru;} 

document.onmousemove = function(e) { 
    if (dragging) { 
     var e = e || window.event; 
     var oX = e.clientX - iX; 
     var oY = e.clientY - iY; 
     $("#animation").css({"left":oX + "px", "top":oY + "px"}); 
     return false; 
    } 
};

//鼠標鬆開：FN（）{拖動= FALSE; }

$('#animation').mouseup(function(e) { 
    dragging = false; 
    this.releaseCapture && this.releaseCapture(); 
    e.cancelBubble = true; 
})

}）

來源

2017-06-09 09:04:00

謝謝！你能解釋一下爲什麼我不能使用本地事件並模擬它嗎？它看起來有點冒險解決方案）） – Rem

div元素的拖放

回答

相關問題