时间戳

首页 > 解决方案 > 矩形到达某处时的Javascript显示代码

javascript - 矩形到达某处时的Javascript显示代码

问题描述

当矩形到达某处时应显示警报的代码；在显示问题之前您应该添加多少细节；该代码使用流行的 javascript 库。Vanilla javascript 应该很好，但很难做到这一点。

  <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>
  #draggable { width: 150px; height: 150px; padding: 0.5em; }
  </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>
  $( function() {
    $( "#draggable" ).draggable();
  } );
  </script>
</head>
<body>

<script>
function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coor = "X coords: " + x + ", Y coords: " + y;
  document.getElementById("demo").innerHTML = coor;
  if(x==40 && y==40)
    {
    alert ("Hello world!");
    }
}
</script>   

<div id="draggable" onmousemove="showCoords(event)" class="ui-widget-content">
  <p>Drag me around</p>  
</div>
function showAlert();
<p>Mouse over the rectangle above to get the horizontal and vertical coordinates of your mouse 
pointer.</p>
<p id="demo"></p>
</head>
</body>
</html>

标签： javascript

解决方案

所以使用可拖动的事件给你。事件对象有位置

$("#draggable").draggable({
  start: function(evt){
    console.log("start", evt.clientX, evt.clientY, evt.pageX, evt.pageY);
  },
  drag: function(evt){
    console.log("drag", evt.clientX, evt.clientY, evt.pageX, evt.pageY);
  },
  stop: function(evt){
    console.log("stop", evt.clientX, evt.clientY, evt.pageX, evt.pageY);
  },
});
#draggable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>


<div id="draggable" class="ui-widget-content">
  <p>Drag me around</p>
</div>

<p id="demo"></p>

推荐阅读