Javascript - wie man rect, Kreis-Koordinaten nach dem Ziehen?

Wie bekomme ich die coords Wert meiner rect1 und circle1 nach dem Ziehen?Javascript - wie man rect, Kreis-Koordinaten nach dem Ziehen?

(zum Beispiel später in Kartenelement zu verwenden, bei. <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>

Quelle

2017-09-05 YumYumYum

Sie können es tun, wie diese

$(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 
    //}); 
    } 
}); 
});

Quelle

2017-09-05 06:42:54

1) Es gibt mir links und oben Wert, aber in Coords brauche ich 4 Werte. 2) Wie bekomme ich 4 Werte von Ihren 2 Werten (links, oben)? – YumYumYum

hmm lassen Sie mich den Code hinzufügen, um alle Koordinaten zu bekommen –

versuchen Sie dies und lassen Sie mich wissen, wenn dies hilfreich ist –

Javascript - wie man rect, Kreis-Koordinaten nach dem Ziehen?

Antwort

Verwandte Themen