title: Droppable and draggable planner issues with randoming moving elements
body: <p>Since the title of this post is quite vague let me explain. I have created a marquee planner on a site I'm working on, and the idea is for users to select a marquee type and size from a dropdown and the image appears on the canvas, which can then be dragged around or rotated. There is also the ability to change the carpet colour and I have implemented jQuery contextMenu to do this, via a small icon in the corner of each element. Although this works and the image is changed within the div successfully, the div always jumps back to the top left of the canvas where it originally gets dropped. This would not be a massive problem if it wasn't for the fact that it's likely users have already arranged their marquee with tables - only to find that when they change the carpet the marquee jumps away from their plan.</p>
  
  <p>Here is the plan page:</p>
  
  <p><a href="https://southwestmarquees.co.uk/newsite/marquee-planner" rel="nofollow noreferrer">https://southwestmarquees.co.uk/newsite/marquee-planner</a></p>
  
  <p>If you open up the very first tab along the top, then choose either a Small Frame, Frame or Traditional marquee, once it appears, drag it to the centre or away from the top left at least, then click the carpet icon on the top right of the div, and change it.</p>
  
  <p>The code that runs when a marquee is selected:</p>
  
  <pre><code>$( ".marquee-selector" ).change(function(){
      var carpet_choice = true;
      if($(this).attr('id') == "catering") {
          carpet_choice = false;
      }
      var val = $(this).find(':selected').val();
      if(val.length &gt; 0) {
          var onCanvas = $('#dropHere &gt; div').length;
          var newItemClass = "item-" + (onCanvas + 1);
          var asset_html = '&lt;div data-marquee-type="'+$(this).attr('id')+'" class="img-responsive ui-draggable-handle ' + newItemClass + ' rotatable ui-resizable ui-draggable"&gt;&lt;img class="marquee" /&gt;&lt;/div&gt;';
          $('#dropHere').append(asset_html);
          $('#dropHere .' + newItemClass + ' .marquee').attr('src', val).load(function () {
              var carpetSizeString = val.match(/\d+(?=ft)/g).join("-");
              $('.'+newItemClass).attr('data-carpet-size',carpetSizeString);
              var image = new Image();
              image.src = $(this).attr("src");
              $('.' + newItemClass).position({
                  my: "left top",
                  at: "left top",
                  of: "#dropHere"
              }).addClass('rotatable');
              make_draggable($('.' + newItemClass));
              if(carpet_choice) {
                  $('.' + newItemClass).append('&lt;div class="carpet-menu"&gt;&lt;/div&gt;');
              }
              $('.rotatable').resizable().rotatable(rotateParams);
              $(this).parent('.' + newItemClass).width(image.naturalWidth);
              $(this).parent('.' + newItemClass).height(image.naturalHeight);
              $('.' + newItemClass).on('dblclick', function () {
                  $(this).remove();
              });
  
          });
          // after it's been dropped on the canvas, reset the dropdown in case the user wants to select another of the same.
          $(this).val("");
      }
  });
  </code></pre>
  
  <p>Where 'marquee-selector' is each dropdown's class.</p>
  
  <p>The context menu for the carpet icon is as follows:</p>
  
  <pre><code>$.contextMenu({
      selector: '.carpet-menu',
      trigger: 'left',
      callback: function(key, options) {
          var carpetSize = $(this).parent().attr('data-carpet-size');
          var marqueeType = $(this).parent().attr('data-marquee-type');
          var carpetColour;
          var imageElement = $(this).parent().children().first();
          var currentWidth = imageElement.width();
          var currentHeight = imageElement.height();
          var currentTop = imageElement.parent().css('top');
          var currentLeft = imageElement.parent().css('left');
          if(key == 1) {
              carpetColour = "";
          } else if(key == 2) {
              carpetColour = "grey";
          } else if(key == 3) {
              carpetColour = "champagne";
          } else {
              carpetColour = "coir";
          }
          if(carpetColour) {
              $(this).parent().find('.marquee').attr('src', '/newsite/wp-content/themes/morb/images/marquee-planner/marquees/' + marqueeType + '/' + carpetSize + '-' + carpetColour + '.png');
          } else {
              $(this).parent().find('.marquee').attr('src', 'http://placehold.it/'+currentWidth+'x'+currentHeight+'/DDDDDD/DDDDDD');
          }
          $(this).remove(); // remove duplicated carpet icon.
          console.log(currentTop);
          console.log(currentLeft);
          imageElement.parent().css( {
              'top' : currentTop,
              'left' : currentLeft
          });
  
          return true;
      },
      items: {
          "1": {name: "Standard Floor", icon: "" },
          "2": {name: "Grey Carpet", icon: ""},
          "3": {name: "Champagne Carpet", icon: ""},
          "4": {name: "Coir Carpet", icon: ""},
          "sep1": "---------",
          "cancel": {name: "Cancel", icon: function($element, key, item){ return 'context-menu-icon context-menu-icon-quit'; }}
      }
  });
  </code></pre>
  
  <p>As you can see, I get the current top and left positions at the beginning then re-assign them just before the return using the <code>.css()</code> function in jQuery. However, it is completely ignored. I even tried adding a purple border using the <code>css()</code> which DOES work - it's just the position that doesn't. It may be that it's being overridden somewhere but I don't know why or how. To clarify, the <code>console.log()</code> just before I set the top and left are correct - you can try the example whilst having the console open.</p>
  
  <p>Any help on this is appreciated and if anyone needs more information please ask.</p>