Kiểm soát sự xuất hiện của hiệu ứng kéo và thả HTML5

Question

Có cách nào để kiểm soát sự xuất hiện của "những gì bạn đang kéo" bằng cách sử dụng API kéo và thả HTML5 không?

Thông thường, bất kỳ phần tử HTML nào đều có thể kéo được là thứ sẽ trở nên nửa công khai và theo con trỏ của bạn cho đến khi bạn dừng/thả. Tôi muốn kiểm soát điều đó để tôi có thể bắt đầu kéo từ bất cứ nơi nào bên trong một phần tử, nhưng khi bạn thực sự bắt đầu kéo, tôi chỉ có thể có một hình ảnh nhỏ theo con trỏ, chính xác vị trí con trỏ.

Ví dụ thực tế là: Danh sách các thứ cần kéo, mỗi danh sách là một hình ảnh nhỏ và một số văn bản cho tên của thứ bạn sẽ kéo sang bên cạnh. Tôi muốn có thể bắt đầu kéo bất cứ nơi nào trong phần tử trên hình ảnh hoặc văn bản, nhưng sau đó chỉ hình ảnh theo con trỏ của bạn và trực tiếp bên dưới con trỏ, thay vì bù đắp từ nơi bạn bắt đầu kéo nó.

Tôi có thể nghĩ ra một vài cách để đánh lừa nó (một yếu tố ẩn xuất hiện khi bạn trỏ chuột, khi bạn bắt đầu kéo và là những gì bạn thực sự kéo) hoặc sử dụng tính năng kéo và thả Javascript cổ điển.

Cảm ơn

Answer 1

Tôi nghĩ .setDragImage(element, x, y); có thể là những gì bạn đang tìm kiếm.

function handleDragStart(e) { 
    var dragIcon = document.createElement('img'); 
    dragIcon.src = 'http://...'; 
    dragIcon.width = 100; 
    e.dataTransfer.setDragImage(dragIcon, x, y); 
} 

this.addEventListener('dragstart', handleDragStart, false); 

Ví dụ ở đây: jsfiddle.net/cnAHv/

Answer 2

Hãy xem this phần của jQuery UI. Nó cho phép bạn dễ dàng tạo ra một bóng ma của phần tử đã kéo trong khi bản gốc vẫn ở vị trí ban đầu của nó. Bạn cũng có thể chỉ định 'helper' tùy chỉnh để theo dõi con trỏ.

Answer 3

Theo this question trên StackOverflow, chúng tôi không thể thay đổi kiểu dáng đối tượng có thể kéo trong khi kéo nó nhưng chúng tôi có thể đặt hình ảnh kéo. Điều này sẽ làm cho một hình ảnh xuất hiện trong khi kéo đối tượng ma.

event.dataTransfer.setDragImage(document.getElementById('div2'),50,50); 

Giải thích:

trên dataTransfer chúng ta gọi là một hàm setDragImage() trong đó chúng ta vượt qua ID của div và cung cấp cho các vị trí của nơi hình ảnh sẽ xuất hiện khi chúng ta sẽ bắt đầu kéo nó.

Xem thêm về dataTransfer đây: Mozilla Developers - DataTransfer

Answer 4

Thật không may, nó trông giống như spec được xây dựng để ủng hộ hành vi tự nhiên phù hợp hơn trong trình duyệt tùy biến.

Chúng tôi đã làm một loạt các nghiên cứu và tóm tắt những phát hiện của chúng tôi ở đây:

https://www.inkling.com/engineering/native-html5-drag-drop/

Các dài và ngắn, mặc dù, đó là sử dụng một helper (như jQuery UI) hoặc cán của riêng bạn nói chung là thích hợp hơn nếu bạn cần phải làm bất cứ điều gì phức tạp.

Tuy nhiên, nếu bạn thực sự muốn sử dụng hành vi gốc và setDragImage() không đủ, có một vài lựa chọn thay thế.

Một cách tiếp cận đặc biệt xa xỉ có thể liên quan đến việc cướp trình kết xuất để tạo ảnh chụp màn hình (!) của phần tử như bạn muốn nó được tạo kiểu và sau đó chèn nó qua URI dữ liệu.

Xem: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

Một cách tiếp cận saner sẽ chỉ đơn giản là hoàn toàn vị trí của một nguyên tố ma đi theo con chuột. Nhưng điều đó đưa chúng ta trở lại viết mã để thực hiện lại các phần cốt lõi của hành vi kéo bên ngoài API.