2012-05-31 174 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>