jquery 代码功能是按下左键拖动div，并且拖动时，div不动，产生一个新的div,的div被拖动，放开左键，新的div消失，原div出现在要拖动到的位置

dwa4821 2016-06-17 02:56:56
一下是这段代码已经实现了功能，是用js做的。我现在要用jq实现同样功能，有些问题，帮忙运行调试一下。jq代码在js代码后面

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>不是获取我</div>
<div id="_this">
<span>
来获取我的内容
</span>
</div>
<div id="_that">
<span>
第三个div
</span>
</div>
<button onclick="createDiv()">创建移动层</button>
</body>
<script>
var offset;
//第二个div
var b = document.getElementById('_this');
b.style.width = '200px';
b.style.height = '200px';
b.style.position = 'absolute';
b.style.backgroundColor = "#666";
b.style.cssFloat = 'left';
//第二个div中的span
var spa = b.getElementsByTagName('span');
var spa0 = spa.item(0);
spa0.style.width = '200px';
spa0.style.height = '30px';
spa0.style.backgroundColor = "red";
spa0.style.display = 'inline-block';

//第三个div
var div3 = document.geementById('_that');
div3.style.width = '200px';
div3.style.height = '200px';
div3.style.position = 'absolute';
div3.style.backgroundColor = "#666";
div3.style.cssFloat = 'left';
div3.style.left = '500px';

//第三个div中的span
var div3_spa = div3.getElementsByTagName('span');
var div3_spa0 = div3_spa.item(0);
div3_spa0.style.width = '200px';
div3_spa0.style.height = '30px';
div3_spa0.style.backgroundColor = "red";
div3_spa0.style.display = 'inline-block';

function createDiv(){
var time=new Date();
divMove=document.createElement('div');
divMove.setAttribute('id',time);
document.body.appendChild(divMove);
htDivMove=document.getElementById(time);
htDivMove.style.width='200px';
htDivMove.style.height='200px';
htDivMove.style.position='absolute';
htDivMove.style.backgroundColor='#666';
htDivMove.style.float='left';
htDivMove.style.left='500px';
var math=Math.random();
spanMove=document.createElement('span');
spanMove.setAttribute('id',math);
divMove.appendChild(spanMove);
htSpanMove=document.getElementById(math);

htSpanMove.style.width='200px';
htSpanMove.style.height='30px';
htSpanMove.style.backgroundColor='red';
htSpanMove.style.display='inline-block';
htSpanMove.onmousedown=mouseDown;

}
//接收虚框
var ChangeAll;

div3_spa0.onmousedown = mouseDown;
spa0.onmousedown = mouseDown;

function mouseDown(event) {
window.id = this.parentElement;
ChangeAll = document.createElement('div');
ChangeAll.style.border = '1px black solid';
ChangeAll.style.width = id.offsetWidth + 'px';
ChangeAll.style.height = id.offsetHeight + 'px';
ChangeAll.style.left = id.offsetLeft + "px";
ChangeAll.style.top = id.offsetTop + "px";
ChangeAll.style.position = 'absolute';
document.body.appendChild(ChangeAll);
offset = {
x: event.pageX - id.offsetLeft,
y: event.pageY - id.offsetTop

}
}
window.onmouseup = function(event) {
if (!ChangeAll)
return;
var d = event.pageX;
var e = event.pageY;
id.style.left = (d - offset.x) + "px";
id.style.top = (e - offset.y) + "px";
document.body.removeChild(ChangeAll);
ChangeAll = null;


}
window.onmousemove = function(event) {
if (!ChangeAll)
return;
var d = event.pageX;
var e = event.pageY;
ChangeAll.style.left = (d - offset.x) + "px";
ChangeAll.style.top = (e - offset.y) + "px";
}
</script>
</html>



jq。。。。。。。。。。。。。。。。。。。。。。。。。。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.0.0.js"></script>
<script>
$(document).ready(function(){
var offset;
$("#_this").css({
'width':'200px',
'height':'200px',
'position':'absolute',
'backgroundColor':'#666',
'float':'left'
})
$("#_this").children("span").css({
'width':'200px',
'height':'30px',
'backgroundColor':'red',
'display':'inline-block'
})
$("button").click(function(){
var math1=Math.random().toString().replace('.','_');
$("<div></div>").attr('id',math1).css({'width':'200px','height':'200px','position':'absolute','backgroundColor':'#666','float':'left','left':'500px'}).appendTo('body')
var math2=Math.random()
$("<span></span>").attr('id',math2).css({'width':'200px','height':'30px','backgroundColor':'red','display':'inline-block'}).appendTo($('#'+math1))
$('#'+math1).mousedown(function(event){
mouseDown(event)
})
})
$("#_this").children("span").mousedown(function(event){
mouseDown(event)
})

function mouseDown(event){
window.spaParentDiv=$('this').parent()
$("<div></div>").attr('id','change').css({'border':'1px solid black ','width':$('this').parent().attr('offsetWidth'),'height':$('this').parent().attr('offsetHeight'),'left':$('this').parent().attr('offsetLeft'),'top':$('this').parent().attr('offsetTop'),'position':'absolute'}).appendTo('body')
offset={
x:event.pageX-$('this').parent().attr('offsetLeft'),
y:event.pageY-$('this').parent().attr('offsetTop')
}
}
$('window').mouseup(function(event){
if(!$('#change'))
return;
var finalyPageX=event.pageX;
var finalyPageY=event.pageY;
finalyLeft=finalyPageX-offset.x;
finalyTop=finalyPageY-offset.Y;
spaParentDiv.attr({'left':finalyLeft,'top':finalyTop})
spaParentDiv.remove()
spaParentDiv=null
})
$('window').mousemove(function(event){
if(!$('#change'))
return;
var finalyPageX=event.pageX;
var finalyPageY=event.pageY;
finalyLeft=finalyPageX-offset.x;
finalyTop=finalyPageY-offset.Y;
})
})


</script>
</head>

<body>
<button>创建移动层</button>
<div>不是获取我</div>
<div id="_this">
<span>
来获取我的内容
</span>
</div>
</body>
</html>
...全文
207 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
dwa4821 2016-06-17
  • 打赏
  • 举报
 回复
引用 1 楼 jslang 的回复:
你这jq代码错误的地方也太多了 

$(document).ready(function() {
	var offset;
	$("#_this").css({
		'width': '200px',
		'height': '200px',
		'position': 'absolute',
		'backgroundColor': '#666',
		'float': 'left'
	})
	$("#_this").children("span").css({
		'width': '200px',
		'height': '30px',
		'backgroundColor': 'red',
		'display': 'inline-block'
	})
	$("button").click(function() {
		var math1 = Math.random().toString().replace('.', '_');
		$("<div></div>").attr('id', math1).css({
			'width': '200px',
			'height': '200px',
			'position': 'absolute',
			'backgroundColor': '#666',
			'float': 'left',
			'left': '500px'
		}).appendTo('body')
		var math2 = Math.random().toString().replace('.', '_');
		$("<span></span>").attr('id', math2).css({
			'width': '200px',
			'height': '30px',
			'backgroundColor': 'red',
			'display': 'inline-block'
		}).appendTo($('#' + math1))
		$('#' + math2).mousedown(mouseDown)
	})
	$("#_this").children("span").mousedown(mouseDown)

	function mouseDown(event) {
		window.spaParentDiv = $(this).parent()
		$("<div></div>").attr('id', 'change').css({
			'border': '1px solid black ',
			'width': $(this).parent().prop('offsetWidth'),
			'height': $(this).parent().prop('offsetHeight'),
			'left': $(this).parent().prop('offsetLeft'),
			'top': $(this).parent().prop('offsetTop'),
			'position': 'absolute'
		}).appendTo('body')
		offset = {
			x: event.pageX - $(this).parent().prop('offsetLeft'),
			y: event.pageY - $(this).parent().prop('offsetTop')
		}
	}
	$(window).mouseup(function(event) {
		if ($('#change').length==0)
			return;
		var finalyPageX = event.pageX;
		var finalyPageY = event.pageY;
		finalyLeft = finalyPageX - offset.x;
		finalyTop = finalyPageY - offset.y;
		spaParentDiv.css({
			'left': finalyLeft,
			'top': finalyTop
		})
		$('#change').remove()
		spaParentDiv = null
	})
	$(window).mousemove(function(event) {
		if ($('#change').length==0)
			return;
		var finalyPageX = event.pageX;
		var finalyPageY = event.pageY;
		finalyLeft = finalyPageX - offset.x;
		finalyTop = finalyPageY - offset.y;
		$('#change').css({
			'left': finalyLeft,
			'top': finalyTop
		})
	})
})
辛苦大神了。两天前才开始自学jq，结果就这样了
天际的海浪 2016-06-17
  • 打赏
  • 举报
 回复
你这jq代码错误的地方也太多了 

$(document).ready(function() {
	var offset;
	$("#_this").css({
		'width': '200px',
		'height': '200px',
		'position': 'absolute',
		'backgroundColor': '#666',
		'float': 'left'
	})
	$("#_this").children("span").css({
		'width': '200px',
		'height': '30px',
		'backgroundColor': 'red',
		'display': 'inline-block'
	})
	$("button").click(function() {
		var math1 = Math.random().toString().replace('.', '_');
		$("<div></div>").attr('id', math1).css({
			'width': '200px',
			'height': '200px',
			'position': 'absolute',
			'backgroundColor': '#666',
			'float': 'left',
			'left': '500px'
		}).appendTo('body')
		var math2 = Math.random().toString().replace('.', '_');
		$("<span></span>").attr('id', math2).css({
			'width': '200px',
			'height': '30px',
			'backgroundColor': 'red',
			'display': 'inline-block'
		}).appendTo($('#' + math1))
		$('#' + math2).mousedown(mouseDown)
	})
	$("#_this").children("span").mousedown(mouseDown)

	function mouseDown(event) {
		window.spaParentDiv = $(this).parent()
		$("<div></div>").attr('id', 'change').css({
			'border': '1px solid black ',
			'width': $(this).parent().prop('offsetWidth'),
			'height': $(this).parent().prop('offsetHeight'),
			'left': $(this).parent().prop('offsetLeft'),
			'top': $(this).parent().prop('offsetTop'),
			'position': 'absolute'
		}).appendTo('body')
		offset = {
			x: event.pageX - $(this).parent().prop('offsetLeft'),
			y: event.pageY - $(this).parent().prop('offsetTop')
		}
	}
	$(window).mouseup(function(event) {
		if ($('#change').length==0)
			return;
		var finalyPageX = event.pageX;
		var finalyPageY = event.pageY;
		finalyLeft = finalyPageX - offset.x;
		finalyTop = finalyPageY - offset.y;
		spaParentDiv.css({
			'left': finalyLeft,
			'top': finalyTop
		})
		$('#change').remove()
		spaParentDiv = null
	})
	$(window).mousemove(function(event) {
		if ($('#change').length==0)
			return;
		var finalyPageX = event.pageX;
		var finalyPageY = event.pageY;
		finalyLeft = finalyPageX - offset.x;
		finalyTop = finalyPageY - offset.y;
		$('#change').css({
			'left': finalyLeft,
			'top': finalyTop
		})
	})
})
jquery图片鼠标拖动效果代码.zip
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
jQuery实现拖动改变div大小功能
通过jQuery实现用户自定义div尺寸功能 主要用到几个鼠标事件： 1.mousedown（）方法 当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或添加当发生 ...
JQuery快速入门教程
课程目标什么是jQuery 是一个JavaScript的函数库 jQuery是一个轻量级的JavaScript库 浏览器兼容比较好 jQuery可以简化JavaScript代码适用人群Java初级开发人员，JavaScript初学者，web前端开发人员课程简介 课程目标...
【JS】左键按下鼠标拖动元素div
这个是之前看到的例子，不知道出处了，源代码如下： New Document /*模块拖拽*/ .drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;...
js进阶 12-17 jquery实现鼠标左键按下拖拽功能
js进阶 12-17 jquery实现鼠标左键按下拖拽功能 一、总结 一句话总结：监听的对象必须是文档，鼠标按下运行mousemove事件，鼠标松开取消mousemove事件的绑定，div的偏移的话是pageX和pageY。 1、为什么直接给div...
JavaScript

87,914

社区成员

224,617

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章