Drop element centered on mouse position

10
September 19, 2019, at 03:30 AM

I have a container where I want to drop an image from a menu below but when I drop it at the main container I cannot get the proper position, it seems it is dropped randomly in the container. How can I get the item dropped centered at mouse position?

var x = null;
$(function() {
  $(".piece").draggable({
    cancel: "a.ui-icon",
    revert: "invalid",
    helper: 'clone',
    containment: '#container',
  });
  $(".piece").droppable({
    accept: ".cap",
    drop: function(event, ui) {
      x = ui.helper.clone();
      x.appendTo(this);
    }
  });
  $(".cap").draggable({
    cancel: "a.ui-icon",
    helper: 'clone'
  });
  $("#container").droppable({
    accept: ".piece",
    drop: function(event, ui) {
      x = $('<div/>');
      x.addClass('piece-div');
      x.css('top', ui.position.top);
      x.css('left', ui.position.left);
      x.draggable({
        containment: '#container',
        cursor: 'move',
      });
      x.appendTo(this);
      x.droppable({
        accept: ".cap",
        drop: function(event, ui) {
          var y = $('<img />');
          y.attr('src', ui.helper.attr('src'));
          y.css('top', ui.offset.top);
          y.css('left', ui.offset.left);
          y.appendTo(this);
        }
      });
      ui.helper.remove();
    }
  });
});

I expect the four colored piece to be dropped centered at mouse position in the grey container but it gets dropped almost randomly. Here is a fiddle: https://jsfiddle.net/littletrives/6p8grnsk/143/

Answer 1

Looks like you might just need to adjust your settings a little. These %'s work in the fiddle but you may need to adjust them with better CSS for your end purpose:

 $("#container").droppable({
    accept: ".piece",
    drop: function(event, ui) {
      x = $('<div/>');
      x.addClass('piece-div');
      x.css('top', '15%');  // Change this to some %
      x.css('left','35%'); // Change this to some %
      x.draggable({
        containment: '#container',
        cursor: 'move',
      });
READ ALSO
How to write a column template to display and checked the checkbox conditionally where Columns are generating dynamically

How to write a column template to display and checked the checkbox conditionally where Columns are generating dynamically

I have a requirement to generate the number of columns dynamically while loading the screen based on the value that comes from databaseI could create the Kendo grid columns based on the input

34
How can I append content within a &lt;div&gt; in HTML into an existing text file? [on hold]

How can I append content within a <div> in HTML into an existing text file? [on hold]

I am generating some data on my html page using JavaScript withinOn the click of a button, I want to append this data to an existing txt file

26
How to get MIME-TYPE from Base 64 String?

How to get MIME-TYPE from Base 64 String?

I am getting base64 for string from backend and i am then decoding it in Javascript to show on browser

36
Click on specific polygon and highlights other polygons

Click on specific polygon and highlights other polygons

So I am creating a Javascript application that I am incorporating ArcGIS Javascript API 412

15