Javascript - 如何獲取矩形，拖動後的圓形座標？

如何在拖動後獲得我的rect1和circle1的coords值？Javascript - 如何獲取矩形，拖動後的圓形座標？

（例如後來在地圖元素的使用。 <area shape="rect" coords="454, 328, 637, 392" nohref onclick="void();"/> <area shape="circle" coords="451, 238, 827, 527" nohref onclick="type();" />）

DEMO:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <style> 
    #parent { 
     position: absolute;top:0px;left:0px; width: 1280px; height: 720px; 
     background-color:red; 
    } 
    #rect1 { width: 150px; height: 150px; padding: 0.5em; } 

    .circleBase { 
    border-radius: 50%; 
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */ 
    } 

    .type1 { 
    width: 100px; 
    height: 100px; 
    background: yellow; 
    border: 3px solid red; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    // 
    // !!!IMPORTANT!!! GOAL 
    // ============================= ****** 
    // Get the coords after dragging and store the last value here 
    // ============================= ****** 
    // 
    var rect_coords = ""; 
    var circle_coords = ""; 

    $(function(){ 
    $("#rect1").draggable({ containment: "parent" }); 
    $("#circle1").draggable({ containment: "parent" }); 
    }); 
    </script> 
</head> 
<body> 

    <div id="parent"> 

    <div id="rect1" class="ui-widget-content"> 
     <p>Rect</p> 
    </div> 


    <div id="circle1" class="ui-widget-content circleBase type1"> 
     <p>Circle</p> 
    </div>  

    </div> 



</body> 
</html>

來源

2017-09-05 YumYumYum

，你可以做這樣的

$(function(){ 
$("#rect1").draggable({ containment: "parent" }); 
$("#circle1").draggable({ containment: "parent" }); 
$("#parent").droppable({ 
    drop: function(event, ui) { 
    //$("#parent").each(function (i, el) {  
    var coords= event.toElement.getBoundingClientRect(); 
    alert(coords); 
    // now rect has all the attributes 
    //}); 
    } 
}); 
});

來源

2017-09-05 06:42:54

1）它給我留下和頂部價值，但在協調我需要4個值。 2）我如何從你的2個值（左，頂部）得到4個值？ – YumYumYum

嗯讓我添加代碼來獲取所有座標 –

試試這個，讓我知道這是否有幫助 –

Javascript - 如何獲取矩形，拖動後的圓形座標？

回答

相關問題