javascriptjqueryangularjsjquery-ui-draggablejquery-ui-droppable

Reputation: 9369

Accurate drop for draggable element on scaled div

THE PROBLEM

I'm having a minor problem dragging elements onto a scalable div container.

Once the element is actually in the container, the elements drag fine and work the way they are supposed to.

Larger elements that are dragged onto the scalable container don't have too much of an issue.

But when smaller elements are dragged, you can see that the mouse is no longer attached to said element and when it is dropped, it drops a little off where it is supposed to drop.

I'm trying to find a solution that my mouse stays on the element and it drops where it is supposed to drop.

I've solved problems bit by bit and you can see below but this is the last piece of the puzzle that's driving me mad. If anyone has the time to lend a hand, it would be greatly appreciated.

Here is a codepen - click and drag the two blue elements onto the white container to try it out

Answers (6)

Julien Grégoire

Reputation: 17114

For the cursor position while dragging, see this answer : Make Cursor position in center for ui.helper in jquery-ui draggable method

Basically, you can control the cursor position of the instance, allowing to have something more dynamic that cursorAt. Like this:

start: function(event, ui){
    $(this).draggable('instance').offset.click = {
        left: Math.floor(ui.helper.width() / 2),
        top: Math.floor(ui.helper.height() / 2)
    }
},

Then on the drop, you need to take into account the transform, but you can simplify by using the helper coordinates instead of the draggable. Like this:

element_top = (ui.helper.offset().top / percent) - (documentBg.offset().top / percent);
element_left = (ui.helper.offset().left / percent) - (documentBg.offset().left / percent);

Result: https://codepen.io/anon/pen/jamLBq

Upvotes: 5

Aanand Kainth

Reputation: 719

This problem occurs when you add a transform to a element's style, then make it draggable. You'll have to make do without transform to have a perfect result. I spent 2 days debugging till I found it out, and I didn't want someone else to go through that pain.

Upvotes: 0

WeHateNick

Reputation: 54

It looks like what is causing this to look strange is the following:

First, the small div is styled as display: block. This means that even though it looks like the div is small, that element actually stretches out to it's whole container.

Second, once you show the dragged square on the left screen, the relation between the mouse cursor and the element whole is technically centered, but you are cutting the size of the original element to a smaller one, and when the width and height get diminished, the result is rendered with the new width and height starting from the upper left corner of the original div. (If you style the small button to be display: inline, you can see what I mean. Try grabbing it from the upper left corner and the try the lower right one. You will see that the former looks fine but the latter is off).

So my suggestions are:

Make the draggabble elements display: inline
Make the dragged element on the left screen the exact height and width of the original element on the right screen.

Hope that helps!

Upvotes: 1

Konrad Ślusarczyk

Reputation: 66

@ITWitch is right, there have to be some bug in draggable(). Style margin: 0 auto; in #sm_textbox_item is the source of problem.

Try to add this to draggable options in your draggableType directive to correct the position:

cursorAt: {left: -parseInt(window.getComputedStyle(element[0],null,null)['margin-left'])},

Upvotes: 0

Nidhin Chandran

Reputation: 856

For attaching elements with cursor during dragging you just need to use

cursorAt: { top: 6, left: -100 }

And a little change in top and left parameters of "sm_textbox_item".

top: (y - documentBg.offset().top) / (percent) + "px",
left: (x - documentBg.offset().left) / (percent) + "px",

For the large box again some tweak in top and left element is required (pen updated).

top: element_top-3, left: element_left+6.49,

I forked your pen and did some changes. I know that this is not a perfect solution, i am also trying to solve this bit by bit. You can check it here

Upvotes: 0

ITWitch

Reputation: 1729

I've forked your codepen and played around with it.

Take a look at it HERE, and see if it helps you find the "bug".

For your draggable script, I changed the code to this, adding margin-left and margin-right:

if(element.attr('id') == 'sm_textbox_item') { /* the small draggable box */
  var el = {
    pos: element.offset(), // position of the small box
    height: element.outerHeight() + 20,
    left: 0
  }
  var deduct = $('#formBox').innerWidth() - 20; // width of the element that's left of small box's container
  el.left = el.pos.left - deduct;

  return $('<div class="text" style="text-align:left; font-size:14px; width:5px; height:5px; line-height:20px;"></div>')
    .css({
      'margin-left': el.left + 'px',
      'margin-top': el.pos.top - el.height + 'px',

      'transform': 'scale(' + percent + ')',
      '-moz-transform': 'scale(' + percent + ')',
      '-webkit-transform': 'scale(' + percent + ')',
      '-ms-transform': 'scale(' + percent + ')'
    });
}

Then, for your droppable script, I changed the formula for element_top and element_left:

// old formula
element_top = (y - documentBg.offset().top - draggable.height() * (percent - 1) / 2) / percent
element_left = (x - documentBg.offset().left - draggable.width() * (percent - 1) / 2) / percent

// new formula
element_top = (y - documentBg.offset().top) / (percent * 0.915)
element_left = (x - documentBg.offset().left) / (percent * 0.915)

It gives an "almost" accurate result, but you may be able to tweak it further to polish it. Hope this helps.

Upvotes: 0

Accurate drop for draggable element on scaled div

THE PROBLEM

Codepen

Full Screen View

Short GIF in Action

Answers (6)

Related Questions