2012-05-31 177 views
0

我希望有人能帮助我解决问题。现在我正在做jquery拖放。 我的问题是,当用户拖动和放置图像放置区域。该下拉区域就像树图。所以放置区域应该像树图一样。但现在我可以放在矩形区域。我不知道我该如何解决这个问题。任何人都可以帮助我。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> 
+0

哪里是你的代码,你尝试过什么? –

+0

我在上面的问题中包含了我的编码。 – sandy

+0

非常感谢你的回答。我会试着用这个 – sandy

回答

0

如果我理解你的问题正确,那么你很可能要使用区域标签来创建其拖动的元素会被放倒的一棵树的形状。

信息上区域可以在这里找到:http://www.quackit.com/html/tutorial/html_image_maps.cfm

例(巫简单COORDS):

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