Jquery 拖放到div中

我一直在想，是否有一种方法可以将不同宽度的对象拖放到div中，这样它们就不会相互影响

假设我有两个div和5个object。我所说的div是指类似时间线的东西，每5分钟有一列。而物体就是电影，显然，每部电影都有它的长度。我想把这些电影拖到我的时间表上

对不起，英语不是我的母语。我拍了张照片，也许能帮你理解我的问题

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

---

谢谢

有很多插件可以做到这一点，例如，

我在Ember.js中实现了一些类似的东西（在其他人的帮助下），用于to do应用程序来回拖动任务。它基本上可以归结为“容器”类型的组件和“任务”（在您的例子中是胶片）类型的组件

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

工作解决方案（）有点过时，因为它使用的是Ember.js1.5，但我相信主要概念仍然适用

请参阅SO-

ember上的原始问题，她没有自己的可排序插件，但可以很好地处理视图。