Javascript - ドラッグアンドクローンJavascript

Question

申し訳ありません私はこれでnewbです...画像をクリックして別のdivにドラッグするが、元の画像を同じ位置と状態に保ちます。 私はこれに行ったが失敗した！助けを前にありがとう。

 <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; 
} 

Javascriptを

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

FULL DEMO

Answer 2

div idから＃を削除して修正します。 jQueryコードから＃に変換します。