jquery 끌어서 놓기 위치

Question

누군가 내 문제를 도울 수 있기를 바랍니다. 이제 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> 

Answer 1

올바르게 그때는 아마 드래그 할 수있는 요소가 삭제됩니다있는 나무의 모양을 만들 영역을 태그를 사용할 것입니다. 지역에

정보는 여기에서 볼 수 있습니다 : 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>