Ember.js - 끌어서 놓기 목록

Question

this question의 예제를 사용하여 웹 응용 프로그램에서 사용할 수있는 끌어서 놓기 스크립트를 만들었습니다.

내 의도대로 다시 디자인 한 후에 구현하고 싶은 몇 가지 기능이 있습니다. ... 은 나 자신을 잠시 동안 노력했습니다,하지만 난 아직 soulution을 발견하지 않았습니다

관련 jsfiddle : http://jsfiddle.net/BLLTH/

특징 :

• 이미 추가 개체를 제거해야합니다 사용 가능한 목록에서

• "x"기호를 클릭하여 추가 된 개체를 제거하면 사용할 수있는 목록으로 돌아갑니다.

그들은

어떤 아이디어가 추가 된 것처럼

개체가 동일한 순서로해야한다? =)

템플릿 :

<script type="text/x-handlebars" > 
<b>Available Objects</b><br /><br /> 
{{#each App.objectsController}} 
    {{#view App.ObjectView contentBinding="this"}} 
     {{view.content.name}}<br /> 
    {{/view}} 
{{/each}} 
<br /><br /><br /><br /> 
{{#view App.ObjectDropTarget dragContextBinding="App.objectsController.currentDragItem"}} 
    {{#each App.cartController}} 
     {{#view App.ObjectView contentBinding="this" class="single"}}     
      {{view.content.name}} 
     {{/view}} 
    {{/each}} 
{{/view}} 

자바 스크립트 : 여기 당신을 위해 처음 두 기능을 http://jsfiddle.net/QE9CS/

"이미 추가 개체를해야 구현했습니다

App = Em.Application.create({}); 
DragNDrop = Em.Namespace.create(); 
DragNDrop.cancel = function(event) { 
    event.preventDefault(); 
    return false; 
}; 
DragNDrop.Draggable = Em.Mixin.create({ 
    attributeBindings: 'draggable', 
    draggable: 'true', 
    dragStart: function(event) { 
     var dataTransfer = event.originalEvent.dataTransfer; 
     dataTransfer.setData('Text', this.get('elementId')); 
    } 
}); 
DragNDrop.Droppable = Em.Mixin.create({ 
    dragEnter: DragNDrop.cancel, 
    dragOver: DragNDrop.cancel, 
    drop: function(event) { 
     event.preventDefault(); 
     return false; 
    } 
}); 
App.Object = Em.Object.extend({ 
    name: null, 
    isAdded: null 
}); 
App.ObjectView = Em.View.extend(DragNDrop.Draggable, { 
    tagName: 'div', 
    // .setDragImage (in #dragStart) requires an HTML element as the first argument 
    // so you must tell Ember to create the view and it's element and then get the 
    // HTML representation of that element. 
    dragStart: function(event) { 
     this._super(event); 
     // Let the controller know this view is dragging 
     this.setPath('content.isDragging', true); 
     // Set the drag image and location relative to the mouse/touch event  
    }, 
    dragEnd: function(event) { 
     // Let the controller know this view is done dragging 
     this.setPath('content.isDragging', false); 
    } 
}); 
App.ObjectDropTarget = Em.View.extend(DragNDrop.Droppable, { 
    tagName: 'div', 
    classNames: ['dropTarget'], 
    classNameBindings: ['cartAction'], 
    // This will determine which class (if any) you should add to 
    // the view when you are in the process of dragging an item. 
    drop: function(event) { 
     var viewId = event.originalEvent.dataTransfer.getData('Text'), 
     view = Em.View.views[viewId]; 
     // Set view properties 
     // Must be within `Ember.run.next` to always work 
     Em.run.next(this, function() { 
      view.setPath('content.isAdded', !view.getPath('content.isAdded')); 
     }); 
     return this._super(event); 
    } 
}); 
App.objectsController = Em.ArrayController.create({ 
    content: [ 
    App.Object.create({ 
     name: "Object 1", 
     isAdded: false 
    }), 
    App.Object.create({ 
     name: "Object 2", 
     isAdded: false 
    }), 
    App.Object.create({ 
     name: "Object 3", 
     isAdded: false 
    }), 
    App.Object.create({ 
     name: "Object 4", 
     isAdded: false 
    }) 
    ], 
    currentDragItem: Em.computed(function(key, value) { 
     return this.findProperty('isDragging', true); 
    }).property('@each.isDragging').cacheable(), 
    objectsInCart: Em.computed(function(key, value) { 
     return this.filterProperty('isAdded', true); 
    }).property('@each.isAdded').cacheable() 
}); 
App.cartController = Em.ArrayController.create({ 
    content: Em.computed(function(key, value) { 
     var cartItems = this.get('cartItems'); 
     if (!Em.empty(cartItems)) { 
      // Sort desc by name 
      return cartItems.sort(function(a, b) { 
       if ((a.get('name').toLowerCase()) < (b.get('name').toLowerCase())) return -1; 
       else return 1; 
      }); 
     } 
    }).property('cartItems').cacheable(), 
    cartItemsBinding: 'App.objectsController.objectsInCart' 
});​ 

Answer 1

이용 가능한 목록에서 제거 될 것 "이라는 배열에 다른 계산 된 속성을 만듭니다.

"추가 된 객체를"x "기호를 클릭하여 제거하면 사용 가능한 목록으로 되돌립니다."그냥 표준 Ember {{action}} 도우미를 사용합니다.

편집 :

전체 버전 http://jsfiddle.net/R9hnY/ 내가 개체에 값을 설정하고 추가하거나 적절한시기에 cartController의 내용에서 개체를 제거하는 계산 된 특성으로 isAdded을 돌았 다. 따라서 cartController에 렌더링 할 객체의 정렬 된 배열을 지정합니다.