-1

I have a drag and drop system and it's all working fine. I have multiple divs that are droppable and multiple divs that are draggable. Then i implemented a clone system to the droppable area, so my droppable divs can all be cloned, and that's working fine too.

The problem it's when i try to drag elements to the cloned draggable areas. The draggable divs don't detect the cloned droppable areas as a droppable area, i only can drag the elements to the original dropp areas.

Do i need to update something to let the draggable divs to know that there's new elements that are droppable?

---EDIT---

To everyone with the same problem, you need to destroy the droppable before the clone. So in your clone function, just put this

$(".drop").droppable( "destroy" );

and then clone, and after that you call the droppable function again.

Ricardo Coutinho
  • 1
  • 3
  • My guess without knowing what plugin you are using would be that yes, you should update the plugin whenever you create new droppable areas. The plugin should have some 'update' or 'refresh' method that you can use to do that. – António Quadrado Aug 22 '16 at 16:25
  • I'm using Jquery UI. I tried to refresh with JS but that doesn't work because when the pages is refreshed the cloned elements are gone (wich is normal because i'm not saving anywhere). – Ricardo Coutinho Aug 22 '16 at 16:32

2 Answers2

0

Are you using jQuery UI in your set up? You should try to change the class name of your draggable divs once they've been moved. Try using: 

$( "#draggable" ).addClass( "newClassName" );

Once you've done that set up your droppable to accept that item. Sounds like jQuery UI think's your item has already been dropped. 

 $( "#droppable" ).droppable({
      accept: ".newClassName",
AndrewLeonardi
  • 3,351
  • 9
  • 47
  • 100
0

To achieve what you are looking for you can reinitialise the newly created droppables by calling an update function on the drop event. I came to this using the example you provided. Try it out.

$(document).ready(function () {
             $(".duplicatedrop").click(
            function () {
            $(".drop").clone(true, true).appendTo(".drop");
            }
        );

    $(function() {
        $( ".drag" ).draggable({
            revert: true,
            cursor: 'move'
        });
    });


    updateDroppables();

    function updateDroppables(){
        $( ".drop" ).droppable({
            accept: ".drag",
            drop: function(event, ui) {
                $(this).find( "p" ).html( "Dropped!" );
                var clone = $(this).clone();
                clone.appendTo('body');
                updateDroppables();
            }
        });
    };
});
António Quadrado
  • 1,307
  • 2
  • 17
  • 34
  • I don't quite understand where do i put that, in the normal function? after the "accept"? – Ricardo Coutinho Aug 22 '16 at 16:44
  • For a start you should have shown what you've made so far instead of just asking a plain question. But as far as I can tell you should use that whenever you create a new element. When you first initialise the plugin only the elements that already exist will be affected so if you want to the new ones to have that behavior you have to enabled them when they are created. – António Quadrado Aug 22 '16 at 16:47
  • I'm on the computer right now, i will try to show in a few minutes. But, btw, that didn't work – Ricardo Coutinho Aug 22 '16 at 16:52
  • Well, my system is pretty complex, i cannot implement on jsfiddle properly. But i made a simple example like this: https://jsfiddle.net/ang5v3es/2/ – Ricardo Coutinho Aug 22 '16 at 17:25
  • i made some mistakes in that onde, https://jsfiddle.net/ang5v3es/5/ The thing is: that's not what is happening in my example, what is going in this example it's that he just apply in both – Ricardo Coutinho Aug 22 '16 at 17:29
  • Check the example I posted the answer. – António Quadrado Aug 22 '16 at 18:03
  • It doesn't work, but it's weird, because in the inspector i see the new divs, but the draggable items just don't detect them – Ricardo Coutinho Aug 23 '16 at 08:13
  • Oh, i forgot, i'm not reaching the droppable area by class, because all of them have same class, so i'm reaching the area with .closest, i tried with the same class and it works like in the example, it replace in all areas. – Ricardo Coutinho Aug 23 '16 at 08:26
  • Ok i tried something. I tried to call the drag and drop function only after de clone and that way it works, but because i only call it after the drop i cannot drag until i clone, wich it's not what i want. Is there a way to stop a function and call another? – Ricardo Coutinho Aug 23 '16 at 08:53
  • Using the example you provided I managed to get my droppable area cloned everytime I dragged and dropped over it and the same for newly created droppables with the peice of code I showed you. If that doesn't work in your actual project maybe is something else that is causing troubles? – António Quadrado Aug 23 '16 at 09:12
  • Maybe, i'm running many tests now to see if there's anything causing troubles. – Ricardo Coutinho Aug 23 '16 at 09:28
  • So, now iv'e created a variable(dropOptions) that has the drop proprierties from the droppable function, and then after the clone, i make: "$( ".drop" ).children().droppable(dropOptions);" It works! BIG BUT...only works on first clone! the clones after that no... – Ricardo Coutinho Aug 23 '16 at 10:19
  • So, now, my question is: Is there a way to define all the childrens instead of only the first? – Ricardo Coutinho Aug 23 '16 at 10:40
  • I already have a solution, if you're interested, see the initial post. Thank's for the help! – Ricardo Coutinho Aug 23 '16 at 14:26
  • I'm glad you figured it out. Cheers – António Quadrado Aug 23 '16 at 14:28