정렬 가능한 div를 외국 요소로 드래그하는 방법

정렬 가능한 컨테이너의 div를 드래그하여 정렬 할 수없는 div에 드롭하고 싶습니다. html5 드래그 앤 드롭 이벤트를 사용해 보았지만 아무도 해고되지 않았습니다. 정렬 가능한 컨테이너의 dragstart 이벤트가 발생하지 않는 것이 가장 중요합니다. 누군가 내게 해결책을 제안 할 수 있습니까? dragstart 이벤트가 해고되기를 바랄뿐입니다. 드래그와의 jQuery UI가 우리에 오류가 발생하기 때문에, drop event에 낙하 할 그것을 추가되고정렬 가능한 div를 외국 요소로 드래그하는 방법

은 기본적으로 우리는 요소를 복제 : JQuery와 UI를 사용하여 다음과 같이 기능을 달성 할 수

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Sortable - Handle empty divsts</title> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
     <style> 
      .draggableDivs{ 
       background-color: orange; 
       border: solid black;  
      } 
     </style> 
    </head> 
    <body> 
     <div id="sortable" style="float: left;"> 
      <div class="draggableDivs" draggable="true">Can be dropped !!..</div> 
      <div class="draggableDivs" draggable="true">..on an empty list</div> 
      <div class="draggableDivs" draggable="true">Item 3</div> 
      <div class="draggableDivs" draggable="true">Item 4</div> 
      <div class="draggableDivs" draggable="true">Item 5</div> 
     </div> 
     <div id="dropTarget" style="width: 500px; height: 500px; background-color: skyblue; float: left; text-align: center"> 
      <h4>Drop Here</h4> 
     </div> 
     <script> 

      $("#sortable").sortable(); 

      document.getElementById('sortable').addEventListener('dragstart', function(evt) { 
       console.log("The 'dragstart' event fired."); 
       evt.dataTransfer.setData('text', evt.target.textContent); 
      }, false); 

     </script> 
    </body> 
</html>

출처

2014-10-31 Quick_Silver

여기서 div를 드래그 할 수 있도록 설정 하시겠습니까? 'draggable = "true"' –

div # dropppable에 대한 jQuery 코드를 추가해야합니다. $ ("#droppable") .droppable ({accept : "div"}); – WisdmLabs

@Darren, sortable 요소는 기본적으로 드래그 가능하다고 생각합니다. 내가 worng 경우 수정하십시오. –

: 여기 내 전체 코드입니다 드래그하고있는 요소를 제거하면됩니다.

그런 다음 stop event 콜백에서 실제 요소를 제거합니다.

$("#sortable").sortable(); 
 
$("#dropTarget").droppable({ 
 
    accept: "div", 
 
    drop: function(event, ui) { 
 
    ui.draggable.clone().appendTo(this); 
 
    ui.draggable.remove(); 
 
    } 
 
})

#sortable { 
 
    float: left; 
 
} 
 
.draggableDivs { 
 
    background-color: orange; 
 
    border: solid black; 
 
} 
 
#dropTarget { 
 
    width: 500px; 
 
    height: 500px; 
 
    float: left; 
 
    text-align: center; 
 
    background-color: skyblue; 
 
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
 
<div id="sortable"> 
 
    <div class="draggableDivs">Can be dropped !!..</div> 
 
    <div class="draggableDivs">..on an empty list</div> 
 
    <div class="draggableDivs">Item 3</div> 
 
    <div class="draggableDivs">Item 4</div> 
 
    <div class="draggableDivs">Item 5</div> 
 
</div> 
 
<div id="dropTarget"> 
 
    <h4>Drop Here</h4> 
 

 
</div>

사이드 노트 :

기본 드래그를 혼합 JQuery와 UI에 떨어 뜨리지 마십시오.
인라인 스타일과 내부/외부 스타일을 혼합하지 마십시오. 가능한 경우 인라인 스타일을 사용하지 마십시오. Why Use CSS?

출처

2014-10-31 18:53:12

자세한 솔루션과 제안을 해주셔서 감사합니다. 그러나 jquery가 dropable을 사용할 때, 떨어 뜨린 요소는 drop target으로 내부적으로 배치되지 않습니다. 즉, 드롭 된 요소는 화면에 대해 배치됩니다. 드롭 타겟의 내부 요소로 어떻게 배치 할 수 있는지 알려주시겠습니까? 즉, 떨어 뜨린 요소는 스크린 위에 떨어 뜨리는 위치에 배치하는 대신 배치 된 요소를 다른 요소 아래에 배치해야합니다. –

@Quick_Silver이를 위해 jquery UI가 주입 한 스타일을 복제 된 요소에서 간단하게 제거 할 수 있습니다. this [jsfiddle] (http://jsfiddle.net/221catyL/)를 참조하십시오. CSS를 사용하여 원하는대로 놓기 영역 안의 항목 모양을 스타일링 할 수 있습니다 –

대단히 감사합니다. 귀하의 솔루션은 정말 명확하고 간단합니다. 나는 당신의 대답을 받아들입니다. –

정렬 가능한 div를 외국 요소로 드래그하는 방법

답변

관련 문제