Question

You can see the issue here: http://jsfiddle.net/qQ6ws/36/

I am using shift to toggle my clone function which is called by the “start” call back on the draggable item.

I’ve had a problem with the event handler not being active unless I first left click on the content frame (lower right) and then hit a letter key. (Lclick + D key ) for example.

Once the event handler is active just shift click and drag on the test box to clone it. This works great in firefox.

Internet explorer 9 & 10 both have issues though. The test boxes keep getting offset each time they are appended to the document and the entire thing gets messed up.

I’ve tried various things but can’t figure out to fix this. Any help would be much appreciated.

Answer 1

Simplifying significantly, I get:

var dragOptopns = {
    start: function(e, ui) {
        if (e.shiftKey) {
            $(this).clone().prependTo('body').draggable(dragOptopns);
        }
    }
};

$(".myClass").draggable(dragOptopns);

click-drag to drag or shift-click-drag to leave a clone behind.

See fork of fiddle

Works fine in Opera 11.62 and IE9.