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プロパティ onを使用してdraggable()、ドラッグしたときに画像がコンテナーから「分割」されるようにします。

ここで公式の jQuery UI のドラッグ可能なドキュメントを参照してください: http://api.jqueryui.com/draggable/#option-helper

于 2013-03-11T14:39:19.947 に答える