CODEWITHSUNDEEP
javascriptjqueryclonedraggable
stevenpjm
stevenpjm

Reputation: 35

Javascript - Drag and clone Javascript

Sorry I'm a newb at this ... looking to click on a picture and drag it into another div but keeping the original picture in the same position and state. I had a go at this but failed! Thanks in advance for the help.

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

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

Upvotes: 1

Views: 109

Answers (2)

Fiido93
Fiido93

Reputation: 1978

I'm using jquery UI api to solve drag and drop. Take a look my example and change the style html that you wanted.

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

Upvotes: 1

Kangjun Heo
Kangjun Heo

Reputation: 1071

Remove # from the div id, modify . to # from the jQuery Code.

Upvotes: 1

Related Questions