1

私はある種のプレイリストクリエーターを構築しています。ユーザーが選択できるいくつかのアイテムと、それらのアイテムをドロップする水平方向の並べ替え可能なタイムライン領域があります。

ドラッグ可能:

$(".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
});

ソート可能:

$("#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;
    }
});

いろいろと試してみたのですが、うまくいきません。できるようにしたいのは、アイテムを利用可能な領域からタイムラインにドラッグし、既に追加されているアイテムの間にドロップすることです。これまでのところ、ヘルパーは常に既存の要素の上に (垂直に) 追加され、ドロップすると最後の要素が最後の位置に追加されます。私がアーカイブしようとしているものが明確であることを願っています...

ここにフィドルがあります：

http://jsfiddle.net/5SBax/4/

要素が追加される場所（他の要素の間）にマーカーを表示したい。そして、毎回追加されるヘルパー要素を取り除く必要があります...

4

1 に答える 1

1

このフィドルを見てください。何を求めているのかよくわかりませんが、これはドラッグ アンド ドロップ機能の良い例です。コメントできません。あなたが何を求めているのかよくわかりません。でも頑張ってください！

http://jsfiddle.net/cuhuak/4CHDZ/

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;
    };
}
于 2013-09-19T22:03:44.567 に答える