1

ドロップしたら、画像のクローンを div にドラッグしようとしています。そのクローンをドラッグしてサイズ変更できるようにしたいのですがcontainment、その div でのみ使用します。クローン イメージを作成すると、正常に動作します。ここでJfiddle !! .

HTML

    <div class="option" id="f">
    <img class="options" src="http://lorempixel.com/90/90/" alt=""/>
</div>
<div class="lame">
    <img src="http://placehold.it/350x150" alt=""/>
</div>

Jクエリ

    $(function() {
    $( ".options" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"
        });
   $(".lame").droppable({ accept:".options",drop: function(event, ui) {
    $.ui.ddmanager.current.cancelHelperRemoval = true;
    $(".ui-draggable").hover(function() {
        $(this).addClass('fix');
        $(this).draggable({containment: ".lame"});
    }, function() {
        $(this).removeClass('fix');
    });
    }
    });
});

しかし、それに追加resizableすると、ドラッグ可能な機能が停止し、画像が下に移動します。ここで見ることができますリンク。また、フィドル画像では下に移動しませんでした。 しかし、ここでもドラッグ可能は機能しません。これを修正する方法を教えてください。または、最新の Jquery-ui バージョンを使用して正しい方法で修正してください。

4

2 に答える 2

1

前の質問からのあなたのリクエストを調べていたところ、あなたが新しい質問をしていることがわかりました.

これが私が思いついたものです。

HTML

<div class="option" id="f" style="display:inline-block;">
  <img class="options" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpqrkAF5pPbe8N9fko9gLyZalAyeSm4p-dyU72YD3FuvmDHCW4" alt=""/>
</div>
<br>
<div class="lame" style="display:inline-block;">
   <img src="http://placehold.it/350x150" alt=""/>
</div>

あなたとdivが画面全体にまたがらないstyle="display:inline-block;"ようにするために、これが重要であることに注意してください。.option.lame

jQuery

$(function() {
    $( ".option" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"});
    $(".lame").droppable({ 
        accept:".option",drop: function(event, ui) {
            $.ui.ddmanager.current.cancelHelperRemoval = true;
            $(ui.helper).draggable({cursor : "pointer",opacity: 0.6,containment :".lame"});
            $(ui.helper).find('.options').resizable({containment : ".lame"});
        }
    });
});

呼び出す代わりに、コンテナ divで呼び出してい.draggableます。 画像がドロップされたら、ドラッグ可能 (または div)にする必要があります。または画像のサイズを変更できます。このようにすると、かなりうまくいくようです。.options.option
.lame.option.options

例を見てみましょう。

http://jsfiddle.net/7kkW3/2/

于 2013-11-01T20:37:57.800 に答える