자바 스크립트 - 드래그 앤 클론 자바 스크립트

Question

죄송합니다.이 사진을 클릭하고 다른 div로 드래그하지만 동일한 위치와 상태로 원본 사진을 유지하려고합니다. 나는 이것에 가봤지만 실패했다! 도움에 미리 감사드립니다. 사업부 ID와

 <div id="#user3profile" > 
      <img src="pic/user3.png" class="userprofilepic" id="userprofile3" width="88" height="70"> 
     </div> 

     <script> 
      $(".userprofilepic").draggable({ helper: 'clone'}); 
     </script> 

Answer 1

jquery UI API를 사용하여 드래그 앤 드롭을 해결합니다. 내 예제를보고 원하는 스타일 HTML을 변경하십시오.

HTML

<br><br> 

<table class="original" id="diagram"> 
    <tbody id="sortable2"> 
    <tr class="new-item"> 
     <td><img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney" /></td> 
    </tr> 
    </tbody> 
</table> 


<br><br> 

<table class="clone" id="diagram1" > 
    <tbody id="clonetable"> 

    </tbody> 
</table> 

<br><br> 

CSS

table{ 
    border: 1px solid black; 
    width:200px; 
} 

.original tbody tr.test2 td { 
    background: rgba(20, 111, 186, 0.38); 
} 

img { 
    width:200px; 
    height:auto; 
} 

자바 스크립트

$("#clonetable").sortable({ 
    revert: true, 
    stop: function(event, ui) { 
    } 
}); 
$(".new-item").draggable({ 
    connectToSortable: "#clonetable", 
    helper: "clone", 
    revert: "invalid", 
    zIndex: 10000 
}); 

FULL DEMO

Answer 2

제거 번호는 수정합니다. jQuery 코드에서 #까지.