Drag drop with helper clone and insertInline messes up the dropped array?

Quick glance: http://g.recordit.co/GOL1YK5LR8.gif I create a snippet with clone helper and insertInline to sort the items in the “droppable” area.

<div id="edit-calculator">
    <div id="fields">
          <ul>
            <li 
            ng-repeat='fieldType in fieldTypes' 
            data-drag="true" 
            data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" 
            ng-model="fieldTypes" 
            jqyoui-draggable="{index: {{$index}}, animate: true, placeholder: 'keep'}">
            {{fieldType.name}}
            </li>
          </ul>
    </div> 
    <div id="added">
        <ul data-drop="true" ng-model='addedFields' jqyoui-droppable="{multiple:true}">
	    <li 
	    ng-repeat="item in addedFields track by $index" 
	    data-drop="true" 
	    data-drag="true" 
	    ng-model="addedFields" 
	    jqyoui-droppable="{index: {{$index}}}" 
	    jqyoui-draggable="{index: {{$index}}, insertInline: true, direction:'jqyouiDirection'}" 
	    data-jqyoui-options="{revert: 'invalid'}" 
	    data-direction="{{item.jqyouiDirection}}">
		{{item.name}}
	    </li>
            <li class="placeholder" ng-if="addedFields.length== 0">Your field here</li>
        </ul>
    </div>	
</div>

After dropping an item into the droppable area, it messed up the end array (changes them completely). I have no clue what causes this…

[hunteryxx]

@phuwin have you solved the issue you got now, seems I got the same issue at the moment. Please share some light on the road if you’ve already figured it out, thanks!

[codef0rmer]

You do not need to use insertInline in order to sort the array, that’s not why the feature was introduced. The insertInline is like sortable in jqueryUI.

For the sorting functionality, you can sort the array upfront and use it in ngRepeat then, refer filters demo for that: https://github.com/codef0rmer/angular-dragdrop/blob/master/demo/dnd-filters.html

On Thu, Dec 8, 2016 at 1:35 PM, Phu Nguyen [e-mail] wrote:

@codef0rmer https://github.com/codef0rmer I still need the insertInline because I need the end array to be sortable.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/codef0rmer/angular-dragdrop/issues/305#issuecomment-265678096, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKNO3QQvWYQmFTbTkrryu0TCwbXYeGlks5rF7pcgaJpZM4LGlpQ .

– With Regards, Amit Gharat http://amitgharat.wordpress.com/

The luckiest person is one whose passion and profession are the same.