Reordering about ember-drag-drop HOT 7 CLOSED

Agreed. Started work on some sorting stuff a bit ago, but haven't had time to really work on it yet.

from ember-drag-drop.

Here is a fragment that works for me. Somewhat not thought through:

1. Use of your coordinator for source, but ember global view cache for target
2. Probably best to leave ember bindings to move in dom? Or perhaps in any case just send dom nodes allong in sendAction rather than doing move here.

`import Ember from 'ember'`
`import DraggableObjectTargetComponent from "./draggable-object-target"`

ReorderableListComponent = DraggableObjectTargetComponent.extend(

  acceptDrop: (event)->
    # get source
    id = event.dataTransfer.getData('Text');
    objMap = @get('coordinator.objectMap')
    payload = objMap.getObj(id);
    fromNode = payload.ops.source.$()

    toNode = $(event.target).closest('.draggable-object, .sentinel')
    if toNode.length == 0 or toNode.hasClass('sentinel')
      # move to end
      @sendAction('move', payload.obj, null)
    else
      # move before other
      draggable = Ember.View.views[toNode.attr('id')]
      toObj = draggable.get('content')
      @sendAction('move', payload.obj, toObj)

    # move in DOM
    if toNode?
      fromNode.insertBefore(toNode)


)
`export default ReorderableListComponent`

from ember-drag-drop.

Would also love to see this feature implemented, like in this jsbin.

from ember-drag-drop.

I needed something kind of similar. When I dropped an item into a new drop-target, I wanted to remove it from it's previous target. I managed to do this by:

• Extending draggable-object and having it take its current draggable-object target as a handlebars attribute with a moved(newTarget) function:

import DraggableObject from 'smallbiz/components/draggable-object';

export default DraggableObject.extend({
    tagName: "div",
    classNames: 'external-event navy-bg',
    moved: function(destination){
       ...domain logic for removing itself from the old target if 
        the destination is different and then updating its target
        to the new destination
    }
});

• extending draggable-object-target and overriding its handlePayload(payload) function:

handlePayload: function(payload){
        var obj = this.get('coordinator.objectMap').getObj(payload);
        obj.ops.source.moved(this);
        this._super(payload);
}

If you think a solution like this would be universally useful, I wouldn't mind making a pull request where moved is an empty function that can be overridden

from ember-drag-drop.

I handle reordering by wrapping draggable object with drop target. It solved my problem but I can't show placeholders. I tried to show it with css ::before. But somehow it enters a weird loop of add/remove accepts-drag class :(

from ember-drag-drop.

Ok totally solved the problem. I think there is no need a change on the codebase. I put drop-targets between each item. And I put placeholder div to show some message like "Move here" in each drop-target. When drag over them on the css side Im making placeholder visible. The key point to avoid loop to add 'pointer-events: none' to placeholder div that inside of these drop-targets.

from ember-drag-drop.

I have implemented a new sortable object on v0.2.0 check it out, hopefully will work for you guys. I'll be updating with some new features soon. I'm certainly open to suggestions on how to improve it.

from ember-drag-drop.