3

複数の div ドロップのコンテキスト メニューに、上に移動するボタンと下に移動するボタンがあります。[下に移動] をクリックした後に div を下に移動したいのですが、そうすることができません。

以下は、私が現在使用しているコードです。

$(".propertyClass").live('click', function(event) {
    tempId = this.parentElement.parentElement.attributes[0].nodeValue;
    $.contextMenu({

        selector : '.propertyClass',
        trigger : 'left',
        callback : function(key, options) {
            var m = "clicked: " + key;
            if (!(key == ""))
                // alert(key);
                optionObject[key](event);
            //window.console && console.log(m) || alert(m);
        },
        items : {
            "moveUp" : {
                name : "Move Up",
                icon : "MoveUp"
            },
            "moveDown" : {
                name : "Move Down",
                icon : "MoveDown"
            },
            "Duplicate" : {
                name : "Duplicate",
                icon : "duplicate"
            },

            "Delete" : {
                name : "Delete",
                icon : "delete"
            },

            "sep1" : "---------",
            "showProperties" : {
                name : "Properties",
                icon : "properties"
            }
        }
    });
});

var optionObject = {

    "moveUp" : function() {
        alert("1");
    },
    "moveDown" : function(event) {
        for ( l = 0; l < workspace.length; l++) {
            //console.log(event.pageX);
            // event.pageX="220px";
            // event.pageY="60px";
        }
    },
    "Duplicate" : function(event) {
        var temp = tempId.split("_");
        switch(temp[0]) {
            case "head":
                createHead(workspace);

                break;
            case "txtBox":
                createTextbox(workspace);
                break;
            case "mob":
                createMobno(workspace);
                break;
            case "txtArea":
                createTextArea(workspace);
                break;
            case "fname":
                createfullName(workspace);
                break;

        }
    },
    "showProperties" : function() {
        $("#propertyDialog").dialog({
            height : 300,
            color : "grey",
            width : 600,
            title : "Properties",
            close : function(event, ui) {
                $("#propertyDialog").html("");
            }
        });

        $("#propertyDialog").html("<div id='propDialogDiv1'>General Settings : <table border='1px solid' cellspacing='0' cellpadding='4'><tr><td><div id='propDialogDiv2'>Text</div></td><td><div id='propDialogDiv3'> <input id='propDialogDiv2' type='text'  onClick='this.contentEditable=true;' value='hii'></div></td></tr><td></td><tr></tr><tr><td id='propDialogDiv2'>Field Details</td></tr><tr><td id='propDialogDiv2'>ID:</td><td>" + tempId + "</td></table></div>");

    },
    "Delete" : function(event) {
        for (var k = 0; k < workspace.length; k++) {
            if (tempId == workspace[k].main.id) {
                $(workspace[k].main).remove();
                workspace.splice(k, 1);
            }
        }
    }
}
4

1 に答える 1

0

私が正しく理解している場合は、下向き矢印をクリックしたときに、コンテキスト メニューの div を下に移動 (およびその下の div に置き換え) たいと考えています。

これを行うには、クリック イベントで insertBefore を使用し、メニュー内のすべての div を親メニュー div の子にします。

例: https://mod.it/ItyD_VPb (chrome で表示する必要がありますが、コードはクロスブラウザーです。main.js ファイルを参照してください)。

上記の例では、クリックすると、2 つの div のうち下にある方が上に配置されます。

于 2013-01-03T13:56:18.323 に答える