콘텐츠 메뉴 버튼을 클릭하여 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); 
      } 
     } 
    } 
} 

Answer 1

.

클릭 이벤트를 사용하려면 insertBefore를 사용하고 메뉴에있는 모든 div는 상위 메뉴 div의 하위 항목으로 만듭니다.

예 : https://mod.it/ItyD_VPb (크롬으로 표시해야하지만 코드는 크로스 브라우저로, main.js 파일을보십시오).

위의 예는 클릭 할 때 맨 아래쪽에 2 개 div 중 어느 것이 든 넣을 것입니다.