通过点击内容菜单按钮动态地将div向上或向下移动

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);
            }
        }
    }
}

- sarthi

---

你的意思是：改变它们的位置（旋转）还是屏幕上的位置？ - sdespont

是的，交换最接近的一个。 - sarthi

你能否发布你的HTML代码？或者与你的HTML相对应的内容？ - sdespont

Answer 1

如果我理解正确，您想在单击向下箭头时将上下文菜单中的一个div向下移动（并用下面的div替换它）。

要做到这一点，只需在点击事件中使用insertBefore，并将所有在菜单中的div都作为父菜单div的子元素。

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

上面的示例将在单击时将底部的2个div之一放在顶部。

- asutherland