可拖动溢出答案

【问题标题】：Draggable overflow可拖动溢出
【发布时间】：2012-12-13 09:18:24
【问题描述】：

请帮忙，我想让那个绿色框可以拖到它的父级中，但它也可以从它的父级中溢出，并且当它（绿色框）移动或拖过线时会被隐藏。有人可以帮我吗？

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/，但没有什么可以帮助我.. :(

【问题讨论】：

标签： jquery jquery-ui css

【解决方案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

【讨论】：

【解决方案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" });
}
}
});
});

【讨论】：