javascript - 如何在 HTML 元素上禁用拖放？

我正在開發一個網頁應用程式，我試圖實現一個功能完整的視窗系統。目前進展非常順利，我只遇到一個小問題。有時當我嘗試拖動應用程式的某個部分時（最常是視窗的角落 div，本來應該觸發調整大小的操作），網頁瀏覽器會變得很“聰明”，以為我想要進行拖放操作。結果，我的操作就會被暫停，而瀏覽器則執行它的拖放操作。

有沒有一個簡單的方法可以禁用瀏覽器的拖放功能？我理想的情況是能在使用者點擊某些元素時將其關閉，但又能重新啟用，讓使用者仍然可以在我視窗的內容上使用瀏覽器的正常功能。我正在使用 jQuery，雖然我在查看文檔時沒有找到，但如果你知道有純 jQuery 的解決方案，那將非常好。

簡而言之：我需要在使用者按下滑鼠按鈕時禁用瀏覽器的文字選取和拖放功能，並在使用者釋放滑鼠時恢復這些功能。

答案＃1

這有效。試試看。

<BODY ondragstart="return false;" ondrop="return false;">

答案＃2

嘗試在 mousedown 事件上阻止預設行為：

<div onmousedown="event.preventDefault ? event.preventDefault() : event.returnValue = false">asd</div>

或

<div onmousedown="return false">asd</div>

答案＃3

你可以簡單地使用 draggable="false" 屬性來禁用拖曳。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/draggable http://www.w3schools.com/tags/att_global_draggable.asp

答案＃4

這可能有效：你可以使用 CSS3 禁用對文字、圖片以及基本上所有內容的選取。

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

當然只適用於較新的瀏覽器。欲了解更多詳情，請查看：

如何禁用文字選取高亮

注意：這樣做有一些明顯的使用者體驗缺點，因為它會阻止使用者輕鬆複製文字，請注意這一點。

答案＃5

使用 jQuery 大概會是這樣：

$(document).ready(function() {
  $('#yourDiv').on('mousedown', function(e) {
      e.preventDefault();
  });
});

在我的情況下，我想要禁止使用者在輸入框中拖放文字，所以我使用了「drop」而不是「mousedown」。

$(document).ready(function() {
  $('input').on('drop', function(event) {
    event.preventDefault();
  });
});

你可以用 return false 代替 event.preventDefault()。這裡有區別。

以及程式碼：

$(document).ready(function() {
  $('input').on('drop', function() {
    return false;
  });
});