Ember.js draggable and droppable jqueryUI/native 드래그 앤 드롭 믹스

Question

드래그 앤 드롭 및 정렬 기능이있는 항목을 만들어야합니다. 따라서 항목을 다른 항목으로 드래그 할 수 있습니다.

믹스 인을 통해 드래그하고이 믹스 인을 사용하여 드래그 가능한보기를 만든 다음 드롭 가능한 믹스를 통해 다른 뷰를 만들 수있는 몇 가지 솔루션을 보았습니다.

그러나 나는 draggable, droppable 및 sortable 기능을 갖기 위해 각 항목 /보기가 필요합니다.

누군가 제 믹스 나 서브 클래 싱을 통해이를 수행하는 가장 좋은 방법은 무엇입니까?

또한 jqueryUi mixin을 기본 mixin으로 만든 다음 draggable, droppable 및 sortable mixins를 만들 때 해당 mixin을 사용할 수 있습니까? 이것이 가능한가 ?

jqueryUI 또는 html5 드래그 앤 드롭 API 또는 다른 것을 사용하는 것이 가장 좋습니까? 도움을

감사 릭

Answer 1

당신이 카츠 here하여 코드를 보았다,하지만 난보기하려면이 사용하고 확실하지 : jQuery를 지원 낙하 할, 드래그 가능한, ... 또는 다른 어떤 상호 작용을 UI. 드래그 할 수있는 믹스 인

// Create a new mixin for jQuery UI widgets using the new SproutCore 2.0 
// mixin syntax. 
JQ.Base = Ember.Mixin.create({ 
    // When SproutCore creates the view's DOM element, it will call this 
    // method. 
    didInsertElement: function() { 
    this._super(); 

    // Make jQuery UI options available as SproutCore properties 
    var options = this._gatherOptions(); 

    // Make sure that jQuery UI events trigger methods on this view. 
    this._gatherEvents(options); 

    // Create a new instance of the jQuery UI widget based on its `uiType` 
    // and the current element. 
    var ui = jQuery.ui[this.get('uiType')](options, this.get('element')); 

    // Save off the instance of the jQuery UI widget as the `ui` property 
    // on this SproutCore view. 
    this.set('ui', ui); 


    }, 

    // When SproutCore tears down the view's DOM element, it will call 
    // this method. 
    willDestroyElement: function() { 
    var ui = this.get('ui'); 

    if (ui) { 
     // Tear down any observers that were created to make jQuery UI 
     // options available as SproutCore properties. 
     var observers = this._observers; 
     for (var prop in observers) { 
     if (observers.hasOwnProperty(prop)) { 
      this.removeObserver(prop, observers[prop]); 
     } 
     } 
     ui._destroy(); 
    } 
    }, 

    // Each jQuery UI widget has a series of options that can be configured. 
    // For instance, to disable a button, you call 
    // `button.options('disabled', true)` in jQuery UI. To make this compatible 
    // with SproutCore bindings, any time the SproutCore property for a 
    // given jQuery UI option changes, we update the jQuery UI widget. 
    _gatherOptions: function() { 
    var uiOptions = this.get('uiOptions'), options = {}; 

    // The view can specify a list of jQuery UI options that should be treated 
    // as SproutCore properties. 
    uiOptions.forEach(function(key) { 
     options[key] = this.get(key); 

     // Set up an observer on the SproutCore property. When it changes, 
     // call jQuery UI's `setOption` method to reflect the property onto 
     // the jQuery UI widget. 
     var observer = function() { 
     var value = this.get(key); 
     this.get('ui')._setOption(key, value); 
     }; 

     this.addObserver(key, observer); 

     // Insert the observer in a Hash so we can remove it later. 
     this._observers = this._observers || {}; 
     this._observers[key] = observer; 
    }, this); 

    return options; 
    }, 

    // Each jQuery UI widget has a number of custom events that they can 
    // trigger. For instance, the progressbar widget triggers a `complete` 
    // event when the progress bar finishes. Make these events behave like 
    // normal SproutCore events. For instance, a subclass of JQ.ProgressBar 
    // could implement the `complete` method to be notified when the jQuery 
    // UI widget triggered the event. 
    _gatherEvents: function(options) { 
    var uiEvents = this.get('uiEvents') || [], self = this; 

    uiEvents.forEach(function(event) { 
     var callback = self[event]; 

     if (callback) { 
     // You can register a handler for a jQuery UI event by passing 
     // it in along with the creation options. Update the options hash 
     // to include any event callbacks. 
     options[event] = function(event, ui) { callback.call(self, event, ui); }; 
     } 
    }); 
    } 
}); 

을 그리고 정의 :

JQ.Draggable = Ember.Mixin.create(JQ.Base, { 
    uiType: 'draggable', 
    uiOptions: ['disabled', 'addClasses', 'appendTo', 'axis', 'cancel', 'connectToSortable', 'containment', 'cursor', 
       'delay', 'distance', 'grid', 'handle', 'snap', 'snapMode', 'stack'], 
    uiEvents: ['create', 'start', 'drag', 'stop'] 

}); 

크기 재조정 믹스 인을 : 그래서 당신은 기본 믹스 인, 모든 jQuery를 UI 상호 작용을 유지 mixin에서 사용할 정의

JQ.Resizable = Ember.Mixin.create(JQ.Base, { 
    uiType: 'resizable', 
    uiOptions: ['disabled', 'alsoResize', 'animate', 'animateDuration', 'animateEasing', 'aspectRatio', 'autoHide', 'cancel', 
       'containment', 'delay', 'distance', 'ghost', 'grid', 'handles', 'helper', 'maxHeight', 'maxWidth', 'minHeight', 
       'minWidth'], 
    uiEvents: ['create', 'start', 'resize', 'stop'] 
}); 

기본적으로 각 UI 상호 작용에 대해 uiType (드래그 가능, 드롭 가능, 정렬 가능 등), 상호 작용의 uiOptions (믹스 인에 의해 관찰 됨) 및보기에 구현하려는 상호 작용의.

보기에 JQ.Draggable 및 JQ.Droppable을 포함하면 자동으로 드래그 가능 및 삭제 가능 +보기에서 해당 옵션을 변경하고 해당 변경 사항을 UI 플러그인에 반영 할 수 있습니다. this.set('delay', 900)을 클릭하고보기에서 플러그인 이벤트를 구현합니다 (예 : drag: function(){ /* do something when dragging*\ }).