iT邦幫忙

0

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

COCO 2019-04-16 15:40:101421 瀏覽
  • 分享至 

  • xImage

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

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

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

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

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

都知道用什麼屬性了,網路上隨便找篇教學,甚至官方文件都可以開始,至少先會複製貼上再來調整吧。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
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/

0
nj
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;
}
COCO iT邦新手 5 級 ‧ 2019-04-16 17:39:37 檢舉

您好 ~ 我是一名幼幼班程序員
請問你這個是用甚麼寫的呢?

nj iT邦新手 5 級 ‧ 2019-04-16 20:10:58 檢舉

Processing
不過語法基本上算是java
他也可以用其他語言編寫

我要發表回答

立即登入回答