通過點擊內容菜單按鈕來動態地上下移動div

我在上下文菜單中向上移動並向下移動按鈕以放置多個div。點擊下移後，我想要移除我的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); 
      } 
     } 
    } 
}

來源

2013-01-03 sarthi

你的意思是：改變他們的位置（旋轉）或屏幕上的位置？ – sdespont

YES互換最近的一個 – sarthi

您是否也可以發佈您的HTML代碼？或者與你的HTML相對應的東西？ – sdespont

如果我理解正確，當點擊向下箭頭時，您想在上下文菜單中向下移動div（並將其替換爲下面的那個）。

要做到這一點，只需要點擊事件就可以使用insertBefore並讓菜單中的所有div成爲父菜單div的子項。

例如：https://mod.it/ItyD_VPb（必須在chrome中查看，但代碼是跨瀏覽器，請查看main.js文件）。

上面的例子將把2個div中的任何一個放在頂部的底部，當點擊時。

來源

2013-01-03 13:56:18 asutherland

通過點擊內容菜單按鈕來動態地上下移動div

回答

相關問題