Draggable overflow

Question

Please help, I want to have that green box can be dragged in its parent, but it also can overflow from its parent, and will be hidden when it's (green box) moved or dragged over the line. Can someone help me?

Javascript:

$(document).ready(function() {
  $("#child").draggable({
    containment: 'parent'
  });
});

HTML:

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

Please help, here's the fiddle for example : http://jsfiddle.net/vbJHJ/9/

I read http://api.jqueryui.com/draggable/ but nothing can help me.. :(

bobthyasian · Accepted Answer · 2012-12-13 10:17:09Z

2

You're over complicating things. KISS it. Take off containment and add css overflow to parent.

JS:

$(document).ready(function() {
    $("#child").draggable();
});

CSS:

#parent{
    width:300px; height: 300px; border: 1px solid #ccc; overflow: hidden;
}

#child{
    width: 50px; height: 50px; background: #00ff00;
}

HTML:

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

Demo

answered Dec 13, 2012 at 10:17

bobthyasian

9436 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Talha Akbar · Accepted Answer · 2012-12-13 10:27:02Z

0

BEST SOLUTION EVER: you said you want to make hidden box if moved over the line use this and vote up:

$(document).ready(function() {
$("#child").draggable({
drag : function() {
var bT = $("#parent").offset().top;
var bL = $("#parent").offset().left;
var bLL = bL+$("#parent").width()-$(this).width();
var bTT = bT+$("#parent").height()-$(this).height();
var m = $(this).offset();
if( m.top < bT || m.left < bL || m.left > bLL || m.top > bTT) {
$(this).css({ "opacity" : "0.1" });  
}
else {
$(this).css({ "opacity" : "1" });
}
}
});
});

answered Dec 13, 2012 at 10:27

Talha Akbar

10.1k7 gold badges41 silver badges62 bronze badges

Collectives™ on Stack Overflow

Draggable overflow

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related