CODEWITHSUNDEEP
javascriptjquerydrag-and-dropappendclone
Julie Martins
Julie Martins

Reputation: 31

Drag and Drop Detach and Append CLONE

Edit:

After researching more, I understand the problem better:

I need to detach the clones of an img from their parent div, and attach these clones to a new div (#dm-montagem).

Neither of these worked:

$(ui.helper).detach().appendTo('#dm-montagem');

$(ui.draggable).detach().appendTo('#dm-montagem');

Original Ask:

first of all, I'm REALLY new to javascript and jquery. Everything I learned was on the internet and by trial and error. I have a drag and drop dress-up game I made with jquery. You can check it here: http://dolls.com.br/dollmaker-sereias-2/

This code worked well enough. I wanted the game to be more elaborate, so I added tabs to separate the clothes (ie. hair, blouses, dresses etc).

If you have a solution for that using another code for the tabs system I'm ok with that!

For some reason, the JS fiddle is not working. You can check the current code (and the problem) here: http://dolls.com.br/dollmaker-hot-love-drama/

Thanks a lot!!

Tabs JS: 

function openCategoria(evt, categName) {
// Declare all variables
var i, tabcontent, tablinks;

// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}

// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(categName).style.display = "block";
evt.currentTarget.className += " active";
};  
</script>

Drag and Drops JS:

<!-- SCRIPT dollmaker: drag, drop -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="ftp://[email protected]/public/http_docs/wp-content/themes/dolls2016/js/jQuery_UI_Touch_Punch0-2-3.js"></script>
<script>
jQuery(document).ready(function($) {
$(document).ready(function () {

//Add draggable class to all images
$("img").addClass("draggable");

//Make element draggable
$(".draggable").draggable ({ helper: 'clone'}, {cursor: 'move'}, {stack:"img"})

        .on('drag', function (event, ui) {
            $(this).after (
            $(ui.helper).addClass("removable").draggable ({cursor: 'move'},{stack: "img"}));

})
        .on('dragstop', function (event, ui) {
            $(this).after (
            $(ui.helper).clone().draggable ({cursor: 'move'},{stack: "img"}));

});


//Make UNdraggable
$( ".static" ).draggable( "disable" );

//Trash
$(function() {
$(".stack").draggable();

$('#trash').droppable({
    accept:".removable", drop: function(event, ui) {
        $(ui.draggable).remove();
    }
});
});

});

});

</script>

Upvotes: 3

Views: 949

Answers (3)

Julie Martins
Julie Martins

Reputation: 31

In case it might help someone else, here is the solution I came up with. I changed the whole code, but it works now!

Before, you had to click and drag on the original image to be able to drag the clone. Now, you only need to click on the original, and a clone will appear on the droppable zone. That way I was able to make the droppable zone the parent of the clones, and now you can change the tabs and the the clones still reamin visible.

//Add original class to all images
$("img").addClass("original");

//Click to duplicate on DM-Montagem
$(".original").click(function() {
$( this ).clone().appendTo( "#dm-montagem" ).removeClass("original").addClass("draggable")

//Make Dragabble
.draggable({cursor: 'pointer'}, {stack:"img"})
});

Upvotes: 0

Ali Soltani
Ali Soltani

Reputation: 9946

You can do it like this:

$('#dm-montagem').droppable({
  drop: function(ev, ui) {
    $item = $(ui.helper).clone();
    $item.appendTo($(this));
  }
});

Online demo (jsFiddle)

Upvotes: 1

Kosh
Kosh

Reputation: 18444

The problem is: if I clone an img that is inside a tab and drag it to the dashed area, when I change the tab the image disappears. It only shows again when I click the img's original tab. How do I prevent that from happening?

This happens because when you clone an img inside a tab this tab becomes a parent of the cloned img by default. So when you hide this tab its child elements become hidden too.
To avoid this you might use appendTo option: http://api.jqueryui.com/draggable/#option-appendTo:

$(".draggable").draggable ({
   appendTo: '$#dm-montagem',
   helper: 'clone',
   cursor: 'move',
   stack:"img"
})

Upvotes: 1

Related Questions