拖放到 div

Question

一直在想有没有办法把不同宽度的对象拖放到div中，这样就不会互相强加了。

假设我有两个 div 和 5 个对象。 div 我的意思是类似于时间轴，每 5 分钟有一列。物体就是电影，显然每部电影都有他的长度。我想要的是将这些电影拖放到我的时间线中。

抱歉，英语不是我的母语。我拍了张图，或许可以帮助你理解我的问题。

P.S。我用的是ember.js，如果有她自己的插件或者方法，我想知道。

谢谢！

Answer 1

有很多插件可以做到这一点，例如http://farhadi.ir/projects/html5sortable/

Answer 2

我在 Ember.js 中实现了类似的东西（在其他人的一些帮助下）来执行应用程序来回拖动任务。它基本上归结为 "container" 类型组件和 "task" （或您的情况下的电影）类型组件。

App.TaskContainerComponent = Em.Component.extend({
  classNames: ['col-xs-4', 'taskContainer'],
  isOverdrop: false,
  classNameBindings: ['isOverdrop:isOverdrop'],

  setOverdropIfNotOriginator: function(event, valueToSet){
    var data = JSON.parse(this.get("theData"));
    if(data.stage !== this.get('stage')) {
      this.set('isOverdrop', valueToSet);
    }
  },

  dragEnter: function(event) {
    this.setOverdropIfNotOriginator(event, true);
  },

  dragLeave: function(event){
    this.setOverdropIfNotOriginator(event, false);
  },

  dragOver: function(event){   
    event.preventDefault();
  },

  drop: function(event) {
    var data = JSON.parse(event.dataTransfer.getData('text/data'));
    if(data.stage === this.get('stage')) return;

    // from: data.stage, to: this.get('stage')
    this.sendAction('action', data.id, data.stage, this.get('stage'));
    this.set('isOverdrop', false);
  }
});

App.DragTaskComponent = Em.Component.extend({
  dragStart: function(event) {
    var data = { id: this.get('task.id'), stage: this.get('stage')};
    event.dataTransfer.setData('text/data', JSON.stringify(data));
    this.set("theData", JSON.stringify(data));
  }
});

工作解决方案 (here) 有点过时，因为它使用 Ember.js 1.5，但我相信主要概念仍然适用。

在 SO 上查看原始问题 - Sample task application with drag and drop

拖放到 div

Drag and drop into div

html

css

jquery

drag-and-drop

ember.js