Question

我想在我的应用中拖动一个元素，并希望创建一个限制区域，这样该元素只能在某个区域内拖动。

我有类似的东西。

HTML

<div id='background'>

</div>


<div id="wrapper">
    <img id='viewer' src='http://i60.tinypic.com/1191gxt.jpg' />
</div>

css

#background{
    background: url('http://www.iiacanadanationalconference.com/wp-content/uploads/2013/01/test.jpg') no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position:fixed;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    z-index: -1;
}

#wrapper{
    width: 80%;
    height: 80%;
}

#viewer{      
    cursor: pointer;
}

JS

$( "#viewer" ).draggable({containment: "#wrapper", opacity: 0.65 });

我想限制在highlights图片区域内拖动test图片（无法将其拖动到白色背景），我需要它responsive。

这可能吗？非常感谢！

Answer 1

这是一个可能适合您的解决方案。

<强> Fiddle Demo

您需要为#wrapper提供一个高度，然后将#background定位相等的数量。这应该保持两者不重叠。此外，我发现从背景样式中删除fixed，让它正确地重新调整大小。

CSS：

#background{
   // existing styles

   background: url('http://...') no-repeat top center;
   top: 50px;
}

#wrapper{
 width: 100%;
 height: 45px;
}

如何在我的情况下设置拖放元素

1 个答案: