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 回答