<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<style>
body {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#mydiv {
width: 200px;
height: 100px;
border: 1px solid #ccc;
position: absolute;
left: 300px;
top:300px;
}
#MyContent {
background: #8df3d4;
width: 100%;
height: 100%;
position: absolute;
font-size: 20px;
font-weight: bold;
color: #fff;
text-shadow: 2px 2px 5px #ff0000;
text-align: center;
cursor:move;
}
.nodebo {
border-radius: 15px;
width: 15px;
height: 15px;
background: #fff;
position: absolute;
border: 1px solid #00ffff;
}
.node_top_left {
left: calc(0px - (15px)/2);
top: calc(-15px/2);
cursor: nw-resize;
}
.node_top_center {
left: calc(50% - (15px)/2);
top: calc(-15px/2);
cursor: n-resize;
}
.node_top_right {
right: calc(-15px/2);
top: calc(-15px/2);
cursor: ne-resize;
}
.node_center_left {
left: calc(-15px/2);
top: calc(50% - 15px/2);
cursor: w-resize;
}
.node_center_right {
right: calc(-15px/2);
top: calc(50% - 15px/2);
cursor: e-resize;
}
.node_bottom_left {
left: calc(0px - (15px)/2);
bottom: calc(0px - 15px/2);
cursor: sw-resize;
}
.node_bottom_center {
left: calc(50% - (15px)/2);
bottom: calc(0px - 15px/2);
cursor: s-resize;
}
.node_bottom_right {
right: calc(-15px/2);
bottom: calc(0px - 15px/2);
cursor: se-resize;
}
.node_scale {
border-radius: 15px;
width: 15px;
height: 15px;
position: absolute;
border: 1px solid #00ffff;
top: -50px;
background: #00ffff;
left: calc(50% - (15px)/2);
cursor: url(http://m.aukong.com/scorl/rotate.ico) 10 10,default;
}
.node_shu {
width: 0px;
height: 24.5px;
top: -35px;
color: #00ffff;
border:2px solid #00ffff;
font-weight: bold;
text-align: center;
left: calc(50%);
position: absolute;
}
</style>
<script>
window.onload =function(){
var isMouseDown = false; //鼠标是否按下
var mouseDownPosiY;
var mouseDownPosiX;
var InitPositionY;
var InitPositionX;
var InitHeight;
var InitWidth;
var mousedownid; //按下的元素
$(".nodebo,#MyContent").mousedown(function (e) { //鼠标按下
mouseDownPosiY = e.pageY;
mouseDownPosiX = e.pageX;
isMouseDown = true;
mousedownid = $(this).attr("id");
InitPositionY = $("#mydiv").css("top").replace("px", "");
InitPositionX = $("#mydiv").css("left").replace("px", "");
InitHeight = $("#mydiv").height();
InitWidth = $("#mydiv").width();
$("#txtdownstate").val(isMouseDown);
});
$(document).mousemove(function (e) { //鼠标移动
if (isMouseDown) {
var hh = parseInt(e.pageY) - parseInt(mouseDownPosiY);
var ww = parseInt(e.pageX) - parseInt(mouseDownPosiX);
var tempY = hh + parseInt(InitPositionY);
var tempX = ww + parseInt(InitPositionX);
switch (mousedownid) //修改元素属性
{
case "topleft":
$("#mydiv").css({"top":tempY + "px","height": parseInt(InitHeight) - hh + "px","left": tempX + "px","width":parseInt(InitWidth) - ww + "px"});
break;
case "topcenter":
$("#mydiv").css({"top":tempY + "px","height": parseInt(InitHeight) - hh + "px"});
break;
case "topright":
$("#mydiv").css({"top": tempY + "px","height": parseInt(InitHeight) - hh + "px","width": parseInt(InitWidth) + ww + "px"});
break;
case "centerleft":
$("#mydiv").css({"left": tempX + "px","width": parseInt(InitWidth) - ww + "px"});
break;
case "centerright":
$("#mydiv").css({"width": parseInt(InitWidth) + ww + "px"});
break;
case "bottomleft":
$("#mydiv").css({"height": parseInt(InitHeight) + hh + "px","left": tempX + "px","width": parseInt(InitWidth) - ww + "px"});
break;
case "bottomcenter":
$("#mydiv").css("height", parseInt(InitHeight) + hh + "px");
break;
case "bottomright":
$("#mydiv").css({"height": parseInt(InitHeight) + hh + "px","width": parseInt(InitWidth) + ww + "px"});
break;
case "MyContent":
$("#mydiv").css("left", tempX + "px").css("top", tempY + "px");
break;
}
//显示移动数值（测试用）
$("#txtyd").val($("#mydiv").css("height"));
$("#txtwd").val($("#mydiv").css("width"));
$("#txtleft").val($("#mydiv").css("left"));
$("#txtcs").val($("#mydiv").css("top"));
$("#txtsb").val("from " + parseInt(mouseDownPosiX) + " to " + e.pageX + " = " + ww);
}
}).mouseup(function () {
mousedownid = "";
isMouseDown = false;
$("#txtdownstate").val(isMouseDown); //显示状态
}).mouseleave(function () {
mousedownid = "";
isMouseDown = false;
$("#txtdownstate").val(isMouseDown); //显示状态
});
getscole($(".node_scale"));
}
function getscole(objmodel)
{
var offsetX;
var offsetY;
var isMouseDown = false;
objmodel.mousedown(function (e) { //鼠标按下
offsetX = parseInt($('#mydiv').css('left').replace("px","")) + parseInt($('#mydiv').css("width").replace("px", "")) / 2;
offsetY = parseInt($('#mydiv').css('top').replace("px", "")) + parseInt($('#mydiv').css("height").replace("px", "")) / 2;
isMouseDown = true;
$("#txtleft").val($('#mydiv').css('left'));
$("#txtcs").val($('#mydiv').css('top'));
- 1
- 2
前往页