這個給樓主參考,還沒完成的部份您來練習看看...
<!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/
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;
}