Javascript - Drag and clone Javascript

Question

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>

Fiido93 · Accepted Answer · 2017-03-24 03:37:37Z

1

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

answered Mar 24, 2017 at 3:37

Fiido93

1,9671 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

stevenpjm Over a year ago

Thank you so much.. your a star ... great pic you have used!! hahaha Disney fan ?

Kangjun Heo · Accepted Answer · 2017-03-24 01:43:56Z

1

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

answered Mar 24, 2017 at 1:43

Kangjun Heo

1,0811 gold badge9 silver badges19 bronze badges

3 Comments

stevenpjm Over a year ago

Hi Kang-Jun Heo :), thanks ! :) brains half asleep, the clone part still not working :(

King King Over a year ago

@stevenpjm double check it - it should work. Check it again and again. Also try viewing the console window for any error. Make a simple demo to see it working independently. That's called divide to conquer. Your initial mistakes are almost unbelievable. So it's just easy to keep believing that you still have something wrong elsewhere

King King Over a year ago

@stevenpjm try this jsfiddle.net/z6j0s9nx isn't this what you want? You can drag a cloned image of the img (not sure if you want to drag the div or the img, but from your code it is the img).

Collectives™ on Stack Overflow

Javascript - Drag and clone Javascript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related