Các thư viện JavaScript khác nhau, chẳng hạn như jQuery UI, cung cấp các tương tác kéo và thả, trong đó bạn có thể constrain the movement phần tử được kéo vào một trục hoặc trong một khu vực cụ thể.Làm cách nào để hạn chế chuyển động khi sử dụng tính năng kéo và thả của HTML5?
Đây có phải là loại điều có thể sử dụng API tự nhiên HTML5 drag and drop không?
Hoàn toàn khác! Kéo và thả giao diện người dùng jQuery làm cho việc di chuyển phần tử (với các thuộc tính CSS trên cùng và bên trái) trong trang.
API kéo và thả HTML5 gốc chỉ cho phép bạn di chuyển "ma" của phần tử có thể kéo (tất nhiên, bạn có thể ẩn phần tử gốc trong khi kéo ma).
API đi kèm với a lot of event nhưng không, bạn không thể hạn chế vị trí của chuột để không bị ràng buộc vào trục đơn (gây ma theo vị trí chuột, ngay cả khi chuột rời khỏi trang (nhưng sự kiện có thể ngừng hoạt động)).
+1, tôi đã cập nhật liên kết từ W3Schools lên MDN để tránh điều này trở thành chủ đề của câu hỏi. –
Tôi chưa bao giờ liên kết với W3schools, đó là một người đã chỉnh sửa câu hỏi của tôi. Trang web này là lame. – callum
Liên kết với trường học W3schools nên được coi là trọng tội. – artistoex
có thể trùng lặp của [HTML5: Kéo/thả trên trục X và không phai?] (Http://stackoverflow.com/questions/8933513/html5-drag-drop-on-x-axis-and-without-fade) – SiliconMind
Tôi biết đây là một bài cũ ... nhưng tôi đã giải quyết điều này bằng cách tạo một phần tử nhân bản trên 'dragstart', ẩn bản gốc, và sau đó thiết lập vị trí của bản sao với sự kiện' dragover' - nơi nó có thể bị ràng buộc. Không khác nhiều so với việc sử dụng 'mousemove'. Nó đã được dễ dàng hơn hoàn toàn viết lại kéo và thả - mà tôi chắc chắn nhiều người có. – mseifert