沿對角線拖放？

是否有任何拖放解決方案的示例，其中被拖動的元素只能沿着斜線移動？例如，限制元素的可拖動性，以便它只能沿着30º線或10º等方向移動。沿對角線拖放？

大多數我能夠找到的示例只會將拖動元素的區域約束爲垂直或水平線，或者在更大的父分區內。

可能相關：沿對角線將沒有比100像素，或沿曲線。

2009-10-30 Jason Hall

完整的例子（只FF）

<div id="drag" style="position:absolute;width:20px;height:20px;background:red"></div> 
<script> 
var angle = 10; 
window.onload = function() 
{ 
    var d = document.getElementById("drag"); 
    d.onmousedown = function() { 
     document.onmouseup = function() { 
      document.onmousemove = null; 
     } 
     document.onmousemove = function(e) { 
      d.style.left = e.clientX; 
      d.style.top = e.clientX * Math.tan(angle * Math.PI/180); 
     } 
    } 
} 
</script>

來源

2009-10-30 10:08:07 user187291

添加一些單位（'「PX」'）到你的'left'和'top'分配，這是很好的在所有瀏覽器去（只要有頁面上沒有滾動條）。 – 2009-10-31 07:59:34

看起來真正做到這一點的唯一方法就是跟蹤起始位置的角度，而不是真正煩人的用戶，如果它們處於無效角度，則不要設置droptarget。

這樣，如果他們放開它，它將恢復到原來的位置，唯一有效的放置位置將滿足您的要求。

來源

2009-10-30 02:48:15

但隨後將假設不直接上層建築的線的任何鼠標位置是無效的（即，它形成一個「無效角」你把它）。我想說這個約束對於UX來說實際上是*有害的，因爲它需要精確控制鼠標。更有用的用戶體驗就是從鼠標的任何位置（當然在某個緩衝區內）推斷「正確的」下降點，以幫助那些不能很好地控制鼠標的人（我們大多數人？）。 – 2009-10-30 03:10:34

不，我的建議是，你可以移動物體被拖動無論你想的想法，但是，只有高亮顯示的對象會是那些在正確的角度，任何其他地方會不會與DropTarget。因此，它提供了指導，哪裏是有效的基礎上，概括或讓用戶通過一些反饋，這是有效的，如果他們搬到別處，然後再另一種有效的現貨最終會被高亮知道（概述）。 – 2009-10-30 03:14:45

這似乎很容易做到，如果你寫你自己的DnD處理程序。基本上，限制爲垂直或水平軸的DnD移動僅在動態定位可拖動元素時更改left或top CSS屬性。

您可以使用同樣的想法定製這個內斂的行爲。相反，只需要轉換元素CSS的當前鼠標位置（X，Y），就可以使用X代替left，並通過將right傳遞給像y = mx + b這樣的線性函數來派生right。

來源

2009-10-30 03:26:26

沿對角線拖放？

回答

相關問題