圖像裁剪：如何防止默認拖拽拖放操作？

Question

我正在開發一個圖像裁剪器，並想問你以下問題：爲了防止默認拖拽拖放動作當你按下圖像上的左鍵並保持按下嘗試移動鼠標，wouldn'它是跨瀏覽器，如果只是使用圖片作爲背景的div盒？

就像這樣：

<div id="theDiv" style="background:url(pic.png) no-repeat;"></div> 

你怎麼看？可以接受嗎？不太難看？或者應該用JS來完成？

Answer 1

我會這樣做，沒有真正的其他方式（據我所知）做你想做的交叉瀏覽器。

Answer 2

你在使用框架嗎？是不是每個人都有一個可靠的「dragstart」實現可以簡單地返回false？如我錯了請糾正我。

Answer 3

您可以設置自己的鼠標事件，這將是更合乎邏輯的方式。您甚至不需要在每個瀏覽器的基礎上編寫代碼AFAIK。 這個事件處理程序也可以用來設置裁剪框架。

但是你的方法更簡單，如果你還沒有計劃擴展這麼多。

Answer 4

如果只是將圖片用作div盒的背景，它不會是跨瀏覽器嗎？

是的，但你仍然在開始拖動;如果您將指針移動到文本部分的頁面中，您將選擇文本，而這可能不是您想要的。

我會堅持x.ondragstart=x.onmousedown= function() { return false; };。

Answer 5

我可能會使用draggable="false"或ondrag="return false"，但您的方法同樣適用。

Answer 6

例如，您可以看看this，這是一個用純JavaScript編寫的簡單而快速的圖像裁剪器。它使用mousedown來檢測拖動結束時的拖動開始和mouseup。在拖動過程中，它將偵聽document.onmousemove事件。