1

こんにちは、私は jQuery を初めて使用し、概念実証に取り組んでいます。ここにサンプルコードを投稿しました。私の要件は次のとおりです。

ドロップ可能な犬/羊が 2 匹いて、それらをシャツにドロップしたいと考えています。

羊/犬をシャツにドロップしますが、ドロップするとすぐに div の左下の位置に移動します。

$('[id$="apparel"]').append(dropElem);の代わりにやってみました$(this).append(dropElem);

誰かがこれで私を助けてくれますか?

これは私のJavaScriptです

$(".items").draggable({helper: 'clone'});
$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
        var dropElemId = ui.draggable.attr("id");
        var dropElem = ui.draggable.html();
        $(this).append(dropElem);
        alert("drop done");
    }
});

そしてHTML

<div class="wrap">
    <div class="sourcearea">
        <span class="items" id="itemsheep">
            <img src="sheep.jpg" width="100">
        </span>
        <span class="items" id="itemdog">
            <img src="dog.jpg" width="100">
        </span>
    </div>
    <div class ="droparea">
        <img src="RedShirt.jpg" width="300" height="300" id="apparel">
    </div>
</div>
4

3 に答える 3

1 
$(".items").draggable({helper:'clone'});

$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
       var ele = ui.draggable.eq(0);
       //position element where helper was dropped
       ele.css("position", "absolute");
       ele.css("top", ui.absolutePosition.top);
       ele.css("left", ui.absolutePosition.left);
       //comment next line out if items shouldn't be restricted to redshirt
       ele.draggable('option', 'containment', this);
       //comment previous line out and next in if items shouldn't be draggable anymore
       //ele.draggable('destroy');
       $(this).append(ele);
    }
});
于 2009-12-16T14:12:59.513 に答える
1

ここで本当に何をしようとしているのかわかりませんが、ドロップ可能なクラス内に「ITEM」クラスのコンテンツを追加しようとしているようです。それがあなたのコードが現在実際に行っていることだからです。

  1. その場合は、"item" クラスに "float:left" プロパティを配置する必要があります。これにより、左から順に水平に並べてきれいに積み重ねられます (端が互いに接触しないように、各アイテムに少し右マージンを設定することもできます)。新しいアイテムのサイズが利用可能な水平スペースよりも小さい場合、ドロップ可能な左端まで折り返されます。

  2. アイテムの「クローン」をドロップした場所に「固定」したい場合は、「ui.position」プロパティを使用して、ドロップ可能オブジェクトに対する相対的な位置を保存できます。

  3. 実際のドラッグ可能オブジェクトをドロップ可能オブジェクトに「固定」する場合は、次の行を削除します。

                        var dropElemId = ui.draggable.attr("id");
                    var dropElem = ui.draggable.html();


                    $(this).append(dropElem);

    そして、それは完了です！アイテムのドラッグ可能なプロパティを削除して、アイテムをシャツの内側に「固定」することもできます。

それが役立つことを願っています! ;-)

于 2009-12-16T13:28:48.750 に答える
0

ドロップ後、DIV でスタイルを確認してください。それは絶対に配置されていますか、それは浮いていますか？

また、数か月前に Stack Overflow で発生した同様の問題 (および解決策) を確認してください。ドロップされた要素をコンテナに「スナップ」する別の解決策について説明しています。

于 2009-12-16T12:48:27.873 に答える