2

在我的应用程序中，我使用拖放，我也想在移动设备上实现。我正在考虑像这样使用 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
4

2 回答 2

1

使用该helper: clone属性，draggable()以便图像在拖动时“脱离”其容器。

在此处查看官方 jQuery UI 可拖动文档：http: //api.jqueryui.com/draggable/#option-helper

于 2013-03-11T14:39:19.947 回答
0

您还可以添加自定义助手

$('#draggable').draggable({
  zIndex: 20,
  drag: function(event){...},
  helper: function(){
    $("#outerElement").append($("#draggable").clone().attr('id', 'itWorks'))
    return $("#itWorks");
  },
})

其中 outerElement 是包含您的可拖放元素的元素

于 2016-05-24T18:00:07.373 回答