Ember.js 可拖放 jqueryUI/原生拖放 mixin [英] Ember.js draggable and droppable jqueryUI / native Drag and drop mixin

问题描述

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

I need to create items that have drag and drop and sort functionality. So an item can be dragged into another item.

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

I have seen a few solutions to do drag via a mixin and create a draggable view using this mixin and then creating another view from droppable via the droppable mixin.

但我需要每个项目/视图都具有可拖动、可放置和可排序的功能.

But i need each item / view to have draggable, droppable and sortable functionality.

请谁能告诉我通过混合或子类化或......来做到这一点的最佳方法吗?

Please can anyone tell me the best way to do this via mixins or subclassing or ... ?

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

Also can i create a jqueryUi mixin as a base mixin and then use that mixin when creating the draggable, droppable and sortable mixins ? is this possible ?

最好使用 jqueryUI 或 html5 拖放 api 或其他什么?

Is it best to use jqueryUI or the html5 drag and drop api or something else ?

感谢您的帮助瑞克

推荐答案

不确定您是否看到 Katz 的代码 此处，但我使用它来制作一个视图:Droppable、Draggable...或任何其他 jQuery UI 支持的交互.所以你定义了一个基本的 Mixin，你将在所有 jQuery UI 交互 Mixins 中使用它:

Not sure if you saw the code by Katz here, but I'm using this to make a View: Droppable, Draggable, ... or any other interaction supported by jQuery UI. So you define a base Mixin, which you will use in all jQuery UI interaction 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:

And then define the 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']

});

可调整大小的 Mixin:

the Resizable 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(由 mixin 观察)，以及要在视图中实现的交互的 uiEvents.

Basically for each UI interaction you want to define the uiType (draggable, droppable, sortable, etc.), the uiOptions of the interaction (observed by the mixin), and the uiEvents of the interaction that you want to implement in your View.

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

By including JQ.Draggable and JQ.Droppable in your View, it automatically becomes draggable and droppable + you are able to change its options in your View and reflect those changes on the UI plugin, e.g. this.set('delay', 900), and implement the plugin events in your View, e.g. drag: function(){ /* do something when dragging* } ).

这篇关于Ember.js 可拖放 jqueryUI/原生拖放 mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！