拖放到div

Question

我一直想知道是否有办法将不同宽度的对象拖放到div中，因此它们不会相互强加。

我们说我有两个div和5个对象。通过div我的意思是时间轴，每5分钟有一列。而物体就是电影，每部电影都有自己的长度。我想要的是拖动这些电影并将它们放入我的时间线。

抱歉，英语不是我的母语。我拍了一张照片，可能会帮助你理解我的问题。

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

谢谢！

Answer 1

有许多插件可以执行此操作，例如http://farhadi.ir/projects/html5sortable/

Answer 2

我在Ember.js中实现了类似的东西（在其他人的帮助下），以便进行应用程序来回拖动任务。它基本上归结为“容器”类型组件和“任务”（或您的案例中的电影）类型组件。

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，但我相信主要概念仍然适用。

请参阅原始问题 - Sample task application with drag and drop