Good day.
There is such a constructor: http://dz.ipr-test.in.ua/

The crux of the matter is that when dragging items on the "WEB" and "UI / UX" tabs, the drag and drop items are duplicated. Those. the drop event is called again:

drop: function( event, ui ) { jQuery( ui.draggable ).draggable( 'option', 'disabled', true ).addClass( 'move' ); jQuery( ui.helper ).clone().appendTo( '#mokup-' + jQuery( ui.draggable ).parents( '.tab-pane.active' ).attr( 'id' ) + ' .mokup' ); ...

Here is a short video of the problem: AVI

I can not understand why this is happening and how to overcome it?

    1 answer 1

    In general, the solution so far is through checking for the presence of a dropped element in the receiving unit:

     if ( ! jQuery( '.mokup > li[data-modid=' + jQuery( ui.helper ).data( 'modid' ) + ']' ).length ) { jQuery( ui.draggable ).draggable( 'option', 'disabled', true ).addClass( 'move' ); // inactiv donor-element jQuery( ui.helper ).clone().appendTo( '#mokup-' + jQuery( ui.draggable ).parents( '.tab-pane.active' ).attr( 'id' ) + ' .mokup' ); // clone donor-element and add drop-zone }

    IMXO: this is a situational decision, so I would like to see a more universal solution to the problem :(