jquery - 可拖动变为可拖动

Question

我正在寻找一种将一个项目拖放到另一个可拖动项目中的方法。

html

<div id="range">
    <span class="test">test</span>
    <img src="http://1.bp.blogspot.com/_Ym3du2sG3R4/TQXJiupb32I/AAAAAAAADCs/KIDut36pOeA/s1600/Green-Nature-with-sunrise-wallpaper.jpeg" id="background" />
</div> 

js

jQuery(document).ready(function() {
    jQuery("#background, span.test").draggable(); 
});

jsfiddle

我的示例中所示的问题是，当我在背景 block 末尾 slider 测试时，黑色背景 block 不会扩展。我正在寻找与 Google map 中标记拖放相同的功能

有什么想法吗？非常感谢

Answer 1

问题出在你的CSS上。您应该在 #range 元素中禁用 overflow:hidden。CSS:

#range {
    width:400px;
    height:400px;

    border:1px solid black;
    position: relative;
}

span.test {
    position: absolute;
    left: 20px;
    top: 20px;  
    padding: 10px;
    background: white;
    z-index: 9999;
}
#background{
   position: relative;
   width:100px;
   height:100px;
}

结果:jsfiddle