jquery nested drag on ipad

Question

I have the following setup:

$(".window").draggable({
        containment: "document",
        cancel: ".contact"
    });

$(".contact").draggable({
        containment: "document",
        revert: "invalid",
        helper: "clone",
        appendTo: "body",
        zIndex: "10000",
        start: function (event, ui) {$(".window").draggable("disable"); },
        stop: function (event, ui) {$(".window").draggable("enable"); }
    });

$("#my_list").droppable({
        accept: ".contact",
    });

The contact is a list element which is nested inside a window element. I want to be able to drag windows and contacts, the latter being able to drop on a specific window.

Everything is working fine on all browsers I've tried but on iPad a random behaviour occurs when I drag a contact, the window is dragged with it. The contact clone element is always created and the start and stop functions were an attempt to overcome this problem.

Running a bit out of ideas how to work around this!

Thanks for the help!

Answer 1

Add this script https://github.com/furf/jquery-ui-touch-punch for playing it in Ipad or Iphone.

Hope it helps.