Przeciągnij i upuść wzdłuż ukośnej linii?

Question

Czy istnieją przykłady rozwiązania typu "przeciągnij i upuść", w którym przeciągane elementy mogą poruszać się tylko po pochyłej linii? Na przykład ograniczmy przeciągalność elementu, aby można było go przesuwać tylko wzdłuż linii 30º lub 10º itp.

Większość przykładów, które udało mi się znaleźć, ogranicza obszar obszaru przeciągniętego do linii pionowej lub poziomej lub do większego elementu div rodzicielskiego.

Prawdopodobnie powiązane: Przeciągnij wzdłuż ukośnej linii nie dalej niż 100 pikseli lub wzdłuż krzywej.

Answer 1

kompletny przykład (tylko 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> 

Answer 2

Wydaje się, że jedynym sposobem, aby to zrobić, bez irytowania użytkownika, jest śledzenie kąta od miejsca początkowego, a jeśli są pod nieprawidłowym kątem, nie ustawiaj droptarget.

W ten sposób, jeśli puścisz, powraca do pierwotnej pozycji, a jedyne ważne miejsca do opuszczenia spełniają twoje wymagania.

Answer 3

Wydaje się to łatwe, jeśli napisałeś własny program obsługi DnD. Zasadniczo ruch DnD ograniczony do osi pionowej lub poziomej działa poprzez zmianę atrybutów CSS tylko podczas dynamicznego pozycjonowania elementu, który można przeciągnąć.

Możesz użyć tego samego pomysłu, aby dostosować to powściągliwe zachowanie. Zamiast tłumaczyć (X, Y) aktualnej pozycji myszy dla elementu CSS left/right elementu, można użyć X dla left i wyprowadzić right, przepuszczając go przez funkcję liniową, taką jak y = mx + b.