Javascript 将div拖动到水平可排序容器

我正在建立一个播放列表的创建者。我有一些用户可以选择的项目，还有一个水平可排序的时间线区域可以放置这些项目

可拖动的：

$(".Name:not(#Add a .Name)").draggable({
    revert: 'invalid',
    start: function(){
        $('#MainPage').css('cursor', '-moz-grabbing');
        $(".Name").css('cursor', '-moz-grabbing');
    },
//          helper: "clone",
    helper: function() { 
        return $("<div class='"+$(this).parent().attr('class')+"' id='"+$(this).parent().attr('id')+"'><div class='"+$(this).attr("class")+"' id='"+$(this).attr("id")+"'>"+ $(this).attr("class").split(' ')[1] +"</div></div>"); 
    },
    stop: function() {
        $('#MainPage').css('cursor', 'auto');
        $(".Name").css('cursor', '-moz-grab');
    },
    connectToSortable: "#TimelineDrop",
    appendTo: '#MainPage',
    containment: 'DOM',
    zIndex: 800,
    addClasses: false
});

$（“.Name:不（#添加.Name）”）。可拖动({
还原：“无效”，
开始：函数（）{
$（'#MainPage'）.css（'cursor'，'-moz-grabbing'）；
$（“.Name”）.css（'cursor'，'-moz-grabbing'）；
},
//助手：“克隆”，
助手：函数（）{
返回$（“”+$（this.attr（“class”）.split（“”）[1]+“”）；
},
停止：函数（）{
$（'#MainPage'）.css（'cursor'，'auto'）；
$（“.Name”）.css（'cursor'，'-moz-grab'）；
},
connectToSortable:“#TimelineDrop”，
附件：“#主页”，
包容：“DOM”，
zIndex:800，
addClasses:false
});

可排序的：

$("#TimelineDrop").sortable({ 
    over: function(event, ui) {
        var Breite = ((TimeSpace*5)/(TimeSpace/(currentspacing+24)))-2;
        $("#TimelineDrop").append("<div class='TimelineMarker' style='width:"+ Breite +"px;'>\u00A0</div>");
    },
    receive: function(event, ui) { 
        dropped=true;
        AddElementToTimeline($(this), event, ui, dropped); 
    },
    start: function( event, ui ){ 
        $('#MainPage').css('cursor', '-moz-grabbing');
        $('.TimelineElement').css('cursor', '-moz-grabbing');
        drag=true;
    },
    axis: "x",
    stop: function( event, ui ){
        $('#MainPage').css('cursor', 'auto');
        $('.TimelineElement').css('cursor', '-moz-grab');
        database.updateElementPosition($('.TimelineElement').index($(ui.item)), $(ui.item).children('.TimelineElementTitle').attr('id').split('D')[1], GET('id'));
        drag=false;
    }
});

$（“#TimelineDrop”）。可排序（{
结束：功能（事件、用户界面）{
var Breite=（（时间间隔*5）/（时间间隔/（当前间隔+24））-2；
$（“#TimelineDrop”）。追加（“\u00A0”）；
},
接收：函数（事件，ui）{
删除=真；
AddElementToTimeline（$（此），事件，ui，已删除）；
},
开始：函数（事件，ui）{
$（'#MainPage'）.css（'cursor'，'-moz-grabbing'）；
$（'.TimelineElement'）.css（'cursor'，'-moz-grabbing'）；
阻力=真；
},
轴：“x”，
停止：功能（事件、用户界面）{
$（'#MainPage'）.css（'cursor'，'auto'）；
$（'.TimelineElement'）.css（'cursor'，'-moz-grab'）；
database.updateElementPosition（$（'.TimelineElement'）。index（$（ui.item）），$（ui.item）。children（'.TimelineElementTitle'）。attr（'id'）。split（'D'）[1]，GET（'id'）；
阻力=假；
}
});

我试过各种各样的东西，但都不能正常工作。我们希望能够将项目从可用区域拖到时间线，然后将它们放在allready附加的项目之间。到目前为止，helper始终附加在现有元素之上（垂直），当我将其放下时，最后一个元素将附加在最后一个位置。我希望我想要存档的东西很清楚

我这里有一把小提琴：

---

我希望标记显示在将添加元素的位置（在其他元素之间）。我需要去掉每次添加的helper元素…

看看这个提琴。我不太清楚你在问什么，但这是拖放功能的一个很好的例子。我不能评论，我也不太确定你在问什么。但祝你好运

---

看看这把小提琴。我不太清楚你在问什么，但这是拖放功能的一个很好的例子。我不能评论，我也不太确定你在问什么。但祝你好运

---

请提供一个与您的代码一起工作添加它。对不起！对不起，上面的那个错了。。。这是正确的答案：仍然不是很清楚。绿色的应该和棕色的粘在一起吗？因为现在你可以把它们分开了，这是一件小事。如果你提供你的问题清楚，你肯定会得到答案。请提供一个与你的代码添加它的工作。对不起！对不起，上面的那个错了。。。这是正确的答案：仍然不是很清楚。绿色的应该和棕色的粘在一起吗？因为现在你可以把它们分开了，这是一件小事。如果你清楚地提出你的问题，你肯定会得到答案。

function FieldType(typeName, name) {
    var self = this;
    self.TypeName = ko.observable(typeName || "");
    self.Name = ko.observable(name || this.TypeName());
    self.createField = function () {
        return new Field(
            {
                Name: this.Name(),
                TypeName: this.TypeName()
            }
        );
    }
    self.onDragStart = function(event, ui) {
        dropFieldType  = ko.utils.domData.get(this, "ko_drag_data");
    };
    self.onDragStop = function(event, ui) {
        dropFieldType = null;
    };
}