在我的应用程序中,我使用拖放功能,我也想在移动设备上实现它。我正在考虑像这样使用 JQuery Ui 触摸打洞器:
var thumb = document.createElement("img");
$(thumb).draggable({containment: "html"});
问题是我的图像仅在其父级范围内拖动(参见附图),而不是在整个页面上拖动。我尝试过更改收容选项,但问题似乎出在其他地方。
CSS:
html, body {
height: 100%;
background: black;
margin:0; padding:0;
overflow:hidden;
}
//one parent
.dhThumbOuter {
float: left;
width: 64px;
height: 64px;
-webkit-box-shadow: 0px 0px 5px #4d4d4d;
-moz-box-shadow: 0px 0px 5px #4d4d4d;
box-shadow: 0px 0px 5px #4d4d4d;
border:solid gray 1px;
overflow: hidden;
padding: 3px;
margin-left: 3px;
font-size: smaller;
position:relative;
border : solid gray 2px;
}
//other parrent
.dhThumbImage {
background: lightgray;
padding: 0;
width: 64px;
height: 64px;
overflow: hidden;
position:absolute;
}
Javascript:
var thout = createElement("div", "dhThumbOuter dhRounded");
container.appendChild(thout);
var thinner = createElement("div", "dhThumbImage dhRounded");
thout.appendChild(thinner);
thinner.appendChild(thumb); //my image
最佳答案
使用 draggable()
上的 helper:clone
属性,以便图像在拖动时“脱离”其容器。
请参阅此处的官方 jQuery UI 可拖动文档:http://api.jqueryui.com/draggable/#option-helper
关于jQuery UI 触摸打洞可拖动(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15341044/