Ember.js可拖动和可放置的jqueryUI / native拖放mixin

我需要创建具有拖放和排序function的项目。 因此可以将项目拖动到另一个项目中。

我已经看到了一些通过mixin进行拖动的解决方案，并使用这个mixin创建一个可拖动的视图，然后通过droppable mixin从droppable创建另一个视图。

但我需要每个项目/视图都具有可拖动，可放置和可排序的function。

请任何人告诉我通过mixins或子类化或…的最佳方法吗？

我也可以创建一个jqueryUi mixin作为基础mixin，然后在创建可拖动，可放置和可排序的mixins时使用mixin？ 这可能吗 ？

是最好使用jqueryUI或html5拖放api或其他东西？

谢谢Rick的帮助

Answer 1

不确定你是否在这里看到了Katz的代码，但我正在使用它来创建一个View：Droppable，Draggable，……或者jQuery UI支持的任何其他交互。 因此，您定义了一个基础Mixin，您将在所有jQuery UI交互Mixins中使用它：

// 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); }; } }); } }); 

然后定义Draggable Mixin：

 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'] }); 

可resize的混合：

  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 （可拖动，可uiType ，可排序等），交互的uiOptions （由mixin观察），以及要在View中实现的交互的uiEvents 。

通过在View中包含JQ.Draggable和JQ.Droppable，它会自动变为可拖动和可放置+您可以在View中更改其选项并在UI插件上反映这些更改，例如this.set('delay', 900) ，并在视图中实现插件事件，例如drag: function(){ /* do something when dragging*\ } ）。