Drag drop with helper clone and insertInline messes up the dropped array?
See original GitHub issueQuick 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…
Issue Analytics
- State:
- Created 7 years ago
- Comments:9 (3 by maintainers)
Top Results From Across the Web
When I make a draggable clone and drop it in a droppable I ...
One way to do it is: $(document).ready(function() { $("#container").droppable({ accept: '.product', drop: function(event, ...
Read more >JavaScript Drag & Drop Sortable List Project - YouTube
Learn the drag & drop API, array methods, spread operator, and DOM manipulation in this vanilla JavaScript projectFull 20 Projects ...
Read more >How To Build Sortable Drag & Drop With Vanilla Javascript
IMPORTANT:1 Year Free Hosting: https://www.atlantic.net/webdevsimplifiedUse code KYLE for an additional $50 Drag and drop is something that ...
Read more >Javascript formula builder ui - Un gioco da ragazzi?
This update brings bug fixes for Datepicker, Draggable, and Sortable, as well as fixing some issues with our build process. The abstracts state...
Read more >Functions - Emacs Online Documentation
... Info-desktop-buffer-misc-data · Info-dir-remove-duplicates · Info-directory-find-file ... array-copy-row-up · array-copy-to-cell · array-copy-to-column ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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!
You do not need to use
insertInline
in order to sort the array, that’s not why the feature was introduced. TheinsertInline
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 notifications@github.com wrote:
– With Regards, Amit Gharat http://amitgharat.wordpress.com/
The luckiest person is one whose passion and profession are the same.