Draggable overflow

Question

请帮忙，我想让绿色方块可以在其父项中被拖动，但它也可以从其父项中溢出，并且在（绿色方块）移动或拖动时会隐藏。有人能帮我吗？

的Javascript：

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

HTML：

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

请帮帮忙，这里例如小提琴：http://jsfiddle.net/vbJHJ/9/

我读http://api.jqueryui.com/draggable/但没有什么能帮助我.. :(

Answer 1

你已经过了复杂的事情了。 。取消遏制并将css溢出添加到父项。

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

Answer 2

有史以来最佳解决方案： 你说你想隐藏的框，如果移动过线使用和投票了：

$(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" }); 
} 
} 
}); 
});​