0

誰かが私の問題を解決してくれることを願っています。今私はjqueryのドラッグアンドドロップをしています。私の問題は、ユーザーが画像をドラッグしてドロップ領域に配置するときです。そのドロップエリアは木の絵のようです。したがって、ドロップ領域は木の絵のようにする必要があります。しかし、今では長方形の領域にドロップできます。どうすればこれを解決できるかわかりません。誰でも私を助けてください。

次のコーディングを使用します。

 $j("#draggable").draggable({

                revert: function (dropped) {
                    var $jdraggable = $j(this),
                 hasBeenDroppedBefore = $jdraggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "tree";
                    if (wasJustDropped) {
                        //centering with css
                        centerPopup();
                        //load popup
                        loadsharePopup();
                        return false;
                    } else {
                        if (hasBeenDroppedBefore) {
                            return true;
                        } else {
                            return true;
                        }
                    }
                }
            });

            $j("#tree").droppable({
                activeClass: 'ui-state-hover',
                hoverClass: 'ui-state-active',
                drop: function (event, ui) {
                    //var Stoppos = $j(this).position();
                    //alert("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
                    var newPosX = ui.offset.left - $j(this).offset().left;
                    var newPosY = ui.offset.top - $j(this).offset().top;
                    //alert($j(this).offset().left);
                    $j("#txtPosX").val(newPosX);
                    $j("#txtPosY").val(newPosY);
                    //alert("STOP: \nLeft: "+ newPosX + "\nTop: " + newPosY);
                    $j(this).addClass('ui-state-highlight').find('p').html('Dropped!');
                    $j(ui.draggable).data('hasBeenDropped', true);
                }
            });
        });

<div id="tree">
                    <div id="draggable"></div>
                </div>
4

1 に答える 1

0

私があなたの質問を正しく理解していれば、エリアタグを使用して、ドラッグ可能な要素がドロップされるツリーの形状を作成したいと思うでしょう。

エリアに関する情報はこちらにあります: http://www.quackit.com/html/tutorial/html_image_maps.cfm

例 (魔女の単純な座標):

<map id ="tree">
  <area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
  href ="LINK"
  alt="Mount Cook" />
</map>
于 2012-05-31T09:16:56.793 に答える