How to Force Jquery to Center an Element When It Is Dragged to and Snapped to Another Container

How do I force jquery to center an element when it is dragged to and snapped to another container?

I believe this is what you want.

You can obviously change the positioning if you want and it suits your needs better.

Demo is here: DEMO

$(document).ready(function () {

$(".inputs div").draggable( {
        opacity: .4,
        create: function(){$(this).data('position',$(this).position())},
        cursorAt:{left:15},
        cursor:'move',
        start:function(){$(this).stop(true,true)}
   });

     $('.spaces').find('td').droppable({
         drop:function(event, ui){
             snapToMiddle(ui.draggable,$(this));
         }
     });

 }); 

function snapToMiddle(dragger, target){
    var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
    var leftMove= target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
    dragger.animate({top:topMove,left:leftMove},{duration:600,easing:'easeOutBack'});
}

Drag div to other div

You are looking for the 'revert' option on the draggable elements, in tandem with the 'accept' option on the droppable method:

$(function() {
$( ".draggable" ).resizable();
$( ".draggable" ).draggable({revert: 'invalid', snap: "#dropable"});
$( "#drop_here td" ).droppable({
  accept: '.draggable.accept_me',
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
  });
});

I've updated your JSBin.

To help illustrate the functionality, i've added an additional accept_me classname to the first 3 draggable elements. If you drag either of them onto a table row, it'll accept it and snap into position. If you try to drag & drop any icon other than one of the top three, it'll revert back to it's original position.

Let me know if you need further clarification on this.

How to detect center line of a canvas to center a object when it dragged?

You can define snap functionality manually with moving option. Try following.

    'object:moving' : function(e){
    var objCenter = e.target.getLeft() + (e.target.getWidth()/2);

    var targetLine = canvas.left+(canvas.width/2); 

    if(objCenter > targetLine-10 && objCenter < targetLine+10){

        e.target.left = targetLine - (e.target.getWidth()/2) ;
    }else{
        e.target.setOpacity(1);
    }  

`

How to detect center line of a canvas to center a object when it dragged?

You can define snap functionality manually with moving option. Try following.

    'object:moving' : function(e){
    var objCenter = e.target.getLeft() + (e.target.getWidth()/2);

    var targetLine = canvas.left+(canvas.width/2); 

    if(objCenter > targetLine-10 && objCenter < targetLine+10){

        e.target.left = targetLine - (e.target.getWidth()/2) ;
    }else{
        e.target.setOpacity(1);
    }  

`

Jquery Draggable UI | Change image size when it is dragged into container

The answer is here:
How to find out about the "snapped to" element for jQuery UI draggable elements on snap

$(".draggable").draggable({
    snap: ".snap",
    stop: function(event, ui) {
        /* Get the possible snap targets: */
        var snapped = $(this).data('draggable').snapElements;

        /* Pull out only the snap targets that are "snapping": */
        var snappedTo = $.map(snapped, function(element) {
            return element.snapping ? element.item : null;
        });

        /* Process the results in the snappedTo array! */
    }
});

Jquery draggable - Is possible to drag past margins?

To improve on Abdul's answer, when you add a margin to the child box, it literally has invisible sides on it that fill up the space between the left and right sides of the child and the left and right sides of the parent. So technically you are moving it around, it's just that there is no space for it to move left and right.

To fix this, remove the margin on the child and center it horizontally using the same technique you used to center it vertically:

top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);

How do I set the containment on a jQuery UI Dialog?

You could target the dialog box and apply a containment to it. Try this:

var container = $('.dialog-container'),
    dialog = $('.ui-dialog');
// get container top left corner locations
var cx1 = container.offset().left,
    cy1 = container.offset().top;
// get dialog size
var dw = dialog.outerWidth(),
    dh = dialog.outerHeight();
// get container bottom right location, then subtract the dialog size
var cx2 = container.width() + cx1 - dw,
    cy2 = container.height() + cy1 - dh;
dialog.draggable( "option", "containment", [cx1, cy1, cx2, cy2] );

Edit: I set up a demo for you.

Edit2: Changed to use dialog outerWidth & outerHeight

---

Related Topics