如何拖曳物件並顯示大小和位置？

#javascript #jquery #jqueryui

COCO 2019-04-16 15:40:10 ‧ 1427 瀏覽

分享至

我目前能夠使用鼠標透過拖曳在範圍內上創建一個物件並顯示物件的大小和位置。

如果我想進一步拖曳這個創建出來的物件讓他可以在區域內到處移動，該怎麼做呢？

我需要大家的幫助，謝謝。

PS.曾經想過使用jquery的draggable屬性實作，但還是不知道如何開始。
這是我目前做出來的範例只做到創建物件而已。

https://codepen.io/hong-wei/pen/BEBbve

leonliu777 iT邦新手 5 級 ‧ 2019-04-16 16:54:41 檢舉

都知道用什麼屬性了，網路上隨便找篇教學，甚至官方文件都可以開始，至少先會複製貼上再來調整吧。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

ccutmis

iT邦高手 2 級 ‧ 2019-04-16 16:38:46

這個給樓主參考，還沒完成的部份您來練習看看...

<!doctype html><html><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://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>
<script>
$(function() {
	getXY('draggable');getWH('draggable'); /*初始化XYWH*/
	$("#draggable" ).draggable({cursor:'move',stop: function( event, ui ) {getXY(this.id);}}).resizable({stop: function( event, ui ) {getWH(this.id);}});
	function getXY(idName){
		var position = $('#'+idName).position();
		$('#x').text(position.left+'px');
		$('#y').text(position.top+'px');
	}
	function getWH(idName){
		$('#w').text($('#'+idName).width()+'px');
		$('#h').text($('#'+idName).height()+'px');
	}
});
</script>
<style>
body{background:#333;color:#ccc;}
#draggable{background:#aaa;width: 150px; height: 150px; padding: 0.5em;}
span{margin:10px;color:#ffa;}
</style>
</head>
<body>
X:<span id="x"></span>
Y:<span id="y"></span>
W:<span id="w"></span>
H:<span id="h"></span>
<div id="draggable" class="ui-widget-content"><p>拖我</p></div>
</body></html>

參考資料:
https://jqueryui.com/draggable/
https://jqueryui.com/resizable/

回應
分享
檢舉

登入發表回應

iT邦新手 5 級 ‧ 2019-04-16 17:35:59

給你參考看看雖然不是用JS寫的

float rectX;
float rectY;
float rectW;
float rectH;
PFont font;
float xOffset = 0.0; 
float yOffset = 0.0;
boolean touched = false;

void setup(){
  size(600,600);
  font = createFont("Arial",1);
}
void draw(){
  noStroke();
  fill(235, 240, 242);
  rect(0, 0, width, height);
  
  fill(0);
  textFont(font,20);
  text("x:"+int(rectX),30,30);
  text("y:"+int(rectY),30,70);
  text("w:"+int(rectW),30,110);
  text("h:"+int(rectH),30,150);
  
  fill(0,0,255);
  rect(rectX,rectY,rectW,rectH);
}
void mousePressed(){
  touched = isTouch();
  if(touched){
    xOffset = mouseX-rectX; 
    yOffset = mouseY-rectY;
  }else{
    rectW = 0;
    rectH = 0;
    rectX = mouseX;
    rectY = mouseY;
  }
}
void mouseDragged(){
  if(touched){
    rectX = mouseX - xOffset;
    rectY = mouseY - yOffset;
  }else{
    rectW = mouseX - rectX;
    rectH = mouseY - rectY;
  }
}
void mouseReleased(){
}
boolean isTouch(){
  if(rectW > 0 & rectH > 0){
    if(mouseX > rectX & mouseX < rectX+rectW &
      mouseY > rectY & mouseY < rectY+rectH)
      return true;
  }else if(rectW < 0 & rectH > 0){
    if(mouseX < rectX & mouseX > rectX+rectW &
      mouseY > rectY & mouseY < rectY+rectH)
      return true;
  }if(rectW > 0 & rectH < 0){
    if(mouseX > rectX & mouseX < rectX+rectW &
      mouseY < rectY & mouseY > rectY+rectH)
      return true;
  }if(rectW < 0 & rectH < 0){
    if(mouseX < rectX & mouseX > rectX+rectW &
      mouseY < rectY & mouseY > rectY+rectH)
      return true;
  }
  return false;
}