title: Move div up and down dynamically by clicking content menu buttons
body: <p>I have a move up and move down button in my context menu for multiple div drop.  I want to move my div down after clicking move down, but I am unable to do so.</p>
  
  <p>Below is the code that I am currently using.</p>
  
  <pre><code>$(".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 &amp;&amp; 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 &lt; 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("&lt;div id='propDialogDiv1'&gt;General Settings : &lt;table border='1px solid' cellspacing='0' cellpadding='4'&gt;&lt;tr&gt;&lt;td&gt;&lt;div id='propDialogDiv2'&gt;Text&lt;/div&gt;&lt;/td&gt;&lt;td&gt;&lt;div id='propDialogDiv3'&gt; &lt;input id='propDialogDiv2' type='text'  onClick='this.contentEditable=true;' value='hii'&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;td&gt;&lt;/td&gt;&lt;tr&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id='propDialogDiv2'&gt;Field Details&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td id='propDialogDiv2'&gt;ID:&lt;/td&gt;&lt;td&gt;" + tempId + "&lt;/td&gt;&lt;/table&gt;&lt;/div&gt;");
  
      },
      "Delete" : function(event) {
          for (var k = 0; k &lt; workspace.length; k++) {
              if (tempId == workspace[k].main.id) {
                  $(workspace[k].main).remove();
                  workspace.splice(k, 1);
              }
          }
      }
  }
  </code></pre>