Question

我在上下文菜单中有一个向上移动并向下移动按钮以进行多次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);
            }
        }
    }
}

Answer 1

如果我理解正确的话，当你点击向下箭头时，你想要在上下文菜单中移动一个div（并将其替换为下面的一个）。

要做到这一点，只需让你的点击事件使用insertBefore，并让菜单中的所有div成为父菜单div的子项。

例如：https://mod.it/ItyD_VPb（必须在chrome中查看，但代码是跨浏览器，请查看main.js文件）。

上面的示例会在点击时将两个div中的任意一个放在顶部的底部。

单击内容菜单按钮，动态上下移动div

1 个答案: