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

[phuwin1995]

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...

[codef0rmer]

@phuwin You are doing it wrong. Pls refer, https://github.com/codef0rmer/angular-dragdrop/blob/master/demo/dnd-shoppingcart.html

[phuwin1995]

@codef0rmer Can you point which are the wrong lines of code?

[codef0rmer]

@phuwin AFAIK, your demo is quite similar to the shopping cart demo I shared earlier. Please refer to it because insertInline and other stuff you do not need.

[phuwin1995]

@codef0rmer I still need the insertInline because I need the end array to be sortable.

[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 [email protected] 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.

[phuwin1995]

@codef0rmer Maybe there is a misunderstanding. In the frontpage, it is written insertInline :

Make a list sortable. Same model is mandatory for draggable and droppable.

[phuwin1995]

@codef0rmer The issue I have at the moment is that after the first item dropped, the later items mess up the end array. Sortable function works well though.

[hunteryxx]

@codef0rmer Hi there, I also got this similar issue here.

here is the plunker url https://plnkr.co/edit/lTwpnTdLHtlnhTE1EaLm,

function try to achieve: In shopping cart panel, let's say it already has 1.lolcat shirt & 2.cheezeburger shirt, I want to be able to drag buckit shirt directly from the product panel to the cart panel, the result in the cart panel should have 1.lolcat shirt 2.buckit shirt 3.cheezeburger shirt.

As the plunker url showing, once I drag the buckit shirt from product panel and drop onto cheezeburger shirt which already in the cart panel, everything just mess up, it turns out the result showing 1.lolcat shirt 2.buckit shirt 3.buckit shirt

Please help, thanks!

[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!