jQuery，Move Point和Get Coordination

請訪問此鏈接並運行代碼。jQuery，Move Point和Get Coordination

簡要解釋，添加綠盒通過單擊[添加框]按鈕爲灰色區域。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title></title> 
    <script src="../Scripts/jquery-1.8.2.js"></script> 
    <script src="../Scripts/jquery-ui-1.8.24.js"></script> 

    <style type="text/css"> 
     .draggable { 
      position: absolute; 
      width: 10px; 
      height: 10px; 
      background: green; 
      cursor: move; 
     } 
     #canvas { 
      width: 500px; 
      height: 400px; 
      background: #ccc; 
      position: relative; 
      margin: 2em auto; 
     } 
     #results { 
      text-align: center; 
      background: yellow; 
     } 
    </style> 

<script type='text/javascript'> 
    //<![CDATA[ 
    $(function() { 
     $(".draggable").draggable({ 
      containment: "parent", 
     }); 

     $('#btn_add').click(function() { 
      var htmlData = '<div class="draggable"></div>'; 
      $('#canvas').append(htmlData); 
      $(".draggable").draggable(); 
     }); 
    }); 
    //]]> 
</script> 

</head> 

<body> 
    <form id="form1" runat="server"> 
     <div id="canvas"> 
      <div class="draggable"></div> 
     </div> 
     <div id="results">coordination</div> 
     <input type='button' id="btn_add" value='Add box' /> 
     <input type='button' id="btn_getCoord" value="Get Coordination" /> 
    </form> 
</body> 
</html>

除了這段代碼，我想實現更多。

點擊[添加盒]按鈕，=>點生成的隨機位置。
點擊[獲取協調]按鈕， =>獲得幾個點和快速結果格（黃色區域）的協調。

像這樣。

-Coordination-
X：230，Y：222
X：122，Y：233
X：423，Y：55
X：50，Y：30
...

你可以給我一些組件嗎？

我真的很感謝你的幫助。

來源

2013-10-16 user2423434

http://jsfiddle.net/mQYVY/18/

$(function() { 
    // This run when the document is ready, so it only effect on first point, it won't effect on new points automatically. 
    $(".draggable").draggable({ 
     containment: "parent", 
    }); 

    $('#btn_add').click(function() { 
     var top = 1 + Math.floor(Math.random() * 390); 
     var left = 1 + Math.floor(Math.random() * 490); 
     var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>'; 
     $('.canvas').append(htmlData); 
     // You need limit draggable containment for new point again. 
     $(".draggable").draggable({containment: "parent"}); 
    }); 

    $('#btn_getCoord').click(function() { 
     $('#results').html('-Coordination-'); 
     $('.draggable').each(function(){ 
      var cordInfo = '<br />x: '+$(this).position().left+', y: '+$(this).position().top; 
      $('#results').append(cordInfo); 
     }); 
    }); 
});

來源

2013-10-16 09:24:31 Phoenix

您可以使用：$（this）.position（）。left代替splice ... :) –

謝謝！投了你的答案:) – Phoenix

我還有一個問題。爲什麼不能爲新的可拖動div工作** [containment：「parent」] **？新的點可以從畫布出來。謝謝advace – user2423434

執行此：http://jsfiddle.net/mQYVY/10/

第一部分：

var htmlData = $('<div class="draggable"></div>'); 
var x = Math.floor(Math.random()*501); 
var y = Math.floor(Math.random()*401); 
htmlData.css({'left': x+'px', 'top': y+'px'});

第二部分：

$('#btn_getCoord').click(function() { 
    var output = '-Coordination-'; 
    $('.draggable').each(function() { 
     output += '<br />x: ' + $(this).position().left + ', y: ' + $(this).position().top; 
    }); 
    $('#results').html(output); 
});

來源

2013-10-16 09:18:45

我有一個問題。爲什麼不能爲新的可拖動div工作** [containment：「parent」] **？新的點可以從畫布出來。預先感謝您 – user2423434

更新JS你的第一部分：

$(function() { 
    $(".draggable").draggable({ 
     containment: "parent", 
    }); 

    $('#btn_add').click(function() { 
     var top = 1 + Math.floor(Math.random() * 390); 
     var left = 1 + Math.floor(Math.random() * 490); 
     var htmlData = '<div class="draggable" style="top:'+top+'px;left:'+left+'px;"></div>'; 
     $('.canvas').append(htmlData); 
     $(".draggable").draggable(); 
    }); 
});

對於第二部分請點擊此鏈接：http://api.jquery.com/offset/

來源

2013-10-16 09:23:50

感謝您的幫助。 – user2423434

jQuery，Move Point和Get Coordination

回答

相關問題