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 回答