Jquery Draggable Event Changing the CSS of Child Element

Jquery draggable helper affected by css changes on original element

Do the following to hide the diskette icon while dragging:

1. Modify the .dragging style to visibility:hidden
2. Add style that applies to the element created by helper. .test.dragging i.fa-times { visibility: visible; }

The final css looks like this

.dragging{
  visibility: hidden;
}
  
.test{
  transition: transform 1s linear;
}

.test.dragging i.fa-times {
  visibility: visible;
}

Disable jQuery draggable in child element

To fix this use the cancel property, and provide it a selector to match the element you want to disable the drag behaviour on, like this:

$(function() {  $("#draggable").draggable({    cancel: '.noDrag'  });});

#draggable {  width: 150px;  height: 150px;  padding: 0.5em;  border: black solid 2px;}
.noDrag {  width: 100px;  height: 50px;  border: blue solid 2px;}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div id="draggable" class="ui-widget-content">  <p>Drag me around</p>  <div class="noDrag">No Drag</div></div>

Prevent jquery draggable on parent firing child event

You can use a temp variable to track the drag status and then change from the click event to the mouseup event like this jsFiddle example.

jQuery

var bodyWidth = $(window).width();
var bodyHeight = $(window).height();
var dragging = false;
$("#container").draggable({
    containment: "window",
    start: function() {
        dragging = true;
        $(this).addClass('dragged')
    },
    stop: function() {
        dragging = false;
        $(this).removeClass('dragged')
    }
});

$('.box').mouseup(function() {
    if (!dragging) {
        //If there is already a new box present, remove it
        if ($('.newBox').length) {
            $('.newBox').remove();
        }

        //Get the offset of THIS box we just clicked
        var thisOffset = getOffset(this)

        //Get its left & top value
        var newBoxLeft = thisOffset.left;
        var newBoxTop = thisOffset.top;

        //Full size box will be 75% width & height of viewport
        var newBoxFinalWidth = bodyWidth * 0.75;
        var newBoxFinalHeight = bodyHeight * 0.75;

        //Full size box will be positioned center/center on the screen
        var newBoxDestLeft = (bodyWidth - newBoxFinalWidth) / 2;
        var newBoxDestTop = (bodyHeight - newBoxFinalHeight) / 2;

        //Create our new box
        var newBox = '<div class="newBox clickOut"></div>'

        //Add it to the DOM
        $('body').append(newBox);

        //Position it to overlay the box we just clicked
        $('.newBox').css({
            'left': newBoxLeft,
            'top': newBoxTop
        })

        //Animate it from the orig box position to its final width/height & left/top
        $('.newBox').delay(100).animate({
            'width': newBoxFinalWidth,
            'height': newBoxFinalHeight,
            'left': newBoxDestLeft,
            'top': newBoxDestTop
        }, 2000, 'easeOutExpo')
    }
})

//Clickout function
$(document).click(function(e) { /*if parent of this click is NOT clickout AND this click is NOT clickout then hide stuff*/
    if ($(e.target).parents().is('.clickOut') == false && $(e.target).is('.clickOut') == false) {
        clickOut();
    }
});

function clickOut() {
    $('.newBox').remove()
}

function getOffset(item) {
    var cssOffset = $(item).offset();
    var cssLeft = parseInt(cssOffset.left);
    var cssTop = parseInt(cssOffset.top);

    return {
        'left': cssLeft,
        'top': cssTop
    };
}​

How can I make an element draggable, but not its child elements, using jQuery UI?

You can use the cancel option, which accepts a selector for child elements of the draggable object that should not allow dragging:

$('.draggable').draggable({cancel : 'p'});

JS Fiddle demo.

Using jQuery UI's draggable, how can I drag in anywhere in the parent to move a child?

There's no built-in way to do this. but you can get a similar effect with an extra div and some jQuery and CSS.

jsFiddle example

HTML

<div id="parent">
    <div id="child">Child</div>
    <div id="ghost"></div>
</div>

jQuery

var childX = 0,
    childY = 0;
$('#ghost').draggable({
    drag: function (event, ui) {
        $('#child').offset({
            top: childY + ui.offset.top,
            left: childX + ui.offset.left
        });
    },
    stop: function (event, ui) {
        $(this).offset({
            top: 0,
            left: 0
        });
        childX = $('#child').offset().left;
        childY = $('#child').offset().top;
    }
})

CSS

#parent {
    width: 100%;
    height: 400px;
    border: 1px solid red;
    overflow: hidden;
    position:relative;
}
#child {
    width: 50%;
    height: 50%;
    background-color: green;
    cursor: move;
    position:relative;
    z-index:1;
    pointer-events:none;
}
#ghost {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
}

Set top position to draggable child inside draggable parent

Try to set the limit while you are dragging by using the following code. Just try to reset the top position of your draggable child by calling the method when on event drag in $("#Child").draggable({}). For you current scenario top: -20 is suitable but if you have a bigger header in your parent draggable, then set the value accordingly.

drag: function (event, ui) {
     var divPos = ui.position.top;
     if (divPos < -20) {

         ui.position.top = -20;

     }
}

Here is working JSFiddle.

---

Given below is embedded snippet of your code.

 $(function() {   $('#Parent').draggable({     cursor: 'move',     containment: 'parent'   });
   $("#Child").draggable({     cursor: 'move',     containment: 'parent',     drag: function(event, ui) {
       var divPos = ui.position.top;       if (divPos < -20) {
         ui.position.top = -20;
       }     }   }); });

#wrapper {  width: 800px;  height: 800px;  background: Yellow;}#Parent {  width: 250px;  height: 250px;  background: grey;  top: 100px;  left: 100px;}#Child {  width: 100px;  height: 100px;  background: white;  top: 0px;  left: 50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script><link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /><div id="wrapper">  <div id="Parent">    <h4 class="ui-widget-header">Parent</h4>
    <div id="Child">      <h4 class="ui-widget-header">Child</h4>
    </div>  </div></div>

jQuery Drag/Resize with CSS Transform Scale

It's been a while since this question was asked. I have found (actually created) an answer. All it requires is setting callback handlers. No editing jquery-ui needed!

Note: zoomScale in this example is a global variable and the transform is set using animate (aided by jquery.transform.js) like so:

target.animate({
    transform: 'scale(' + zoomScale + ')'
});

Take a look at this:

transform scale() fix for resizable:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10,  // these need to be large and negative
    minHeight: -(contentElem.height()) * 10, // so we can shrink our resizable while scaled
    resize: function(event, ui) {

        var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
        var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

        var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
        var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

        ui.size.width = newWidth;
        ui.size.height = newHeight;

    }
});

transform scale() fix for draggable:

$(this).draggable({
    handle: '.drag-handle',
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {

        var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
        var newLeft = ui.originalPosition.left + changeLeft / (( zoomScale)); // adjust new left by our zoomScale

        var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
        var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale

        ui.position.left = newLeft;
        ui.position.top = newTop;

    }
});

Let me know if you find any problems or further improvements on this. :)

Reference: jQuery-UI resizable/draggable with transform: scale() set

Jquery Draggable When Clicking on DIV or its Children

Here is an example : LIVE DEMO

It is not very compatible with your combobox because it catch the mouse click event to display its options, but it is working.

$(document).ready(function(){
      var click = false,
      top = null,
      left = null;

    $(document).bind('mousemove', function (e) {
        if (click == true) {
           $('#draggable').css({
             left: e.pageX - left,
             top: e.pageY - top
           });
        }
    });

    $('#draggable').draggable().click(function(e) {
        top = e.pageY - $('#draggable').position().top; 
        left = e.pageX - $('#draggable').position().left;
        click = !click;
        return false;
    });

    $('html').click(function() {
        click = false;
    });
});

---

Related Topics