HTML5 여러 브라우저 창 사이에 여러 요소 드래그 앤 드롭

Question

단일 요소에 대해 HTML5 드래그 앤 드롭이 올바르게 작동했습니다. 이 기능은 여러 브라우저에서 유용합니다. 두 개의 동일하거나 다른 브라우저 창이 열리고 하나의 브라우저에서 드래그하여 다른 브라우저의 dropzone에 요소를 드롭 할 수 있습니다. 이는 단일 요소에 대해 잘 작동합니다.

여러 요소를 선택하고 끌어 놓기를 원할 경우이 작업을 수행하는 방법을 아는 사람이 있습니까?

Answer 1

한 번에 둘 이상의 것을 끌 수 없습니다. 수행해야 할 작업은이 줄에있는 것입니다. 이 예에서는 다중 선택 목록이 있다고 가정하고, 선택한 요소 하나를 드래그하면 선택한 모든 요소를 ​​드래그해야합니다. 당신은 당신이 끌어 원하는 모든 물건을 나타냅니다 거기에서 데이터를 인코딩해야 -

1. 은의 dataTransfer를 설정할 때
2. 이 draggables 중 하나에 같은 dragstart 이벤트를 수신.
3. 드래그 이미지를 사용자 지정하여 두 개 이상의 객체가 드래그되고 있음을 표시합니다.

jsfiddle

$(".draggableThingsSelector").on("dragstart", function(e) { 
    e = e.originalEvent; 

    var fruitList = [], 
     dragImage = document.createElement("ul"); 

    $("li.selected").each(function() { 
     fruitList.push(this.innerHTML); 
     dragImage.appendChild(this.cloneNode(true)); 
    }); 

    e.dataTransfer.setData("fruits", JSON.stringify(fruitList)); 
}); 

은 또한 드래그 이미지 지원을 더 논의 여기를 참조 여기에 예를 참조하십시오 : drag image support