jquery实现仿JqueryUi可拖动的DIV实例

时间：2021-05-26

本文实例讲述了jquery实现仿JqueryUi可拖动的DIV。分享给大家供大家参考。具体如下：

这是用Jquery写的代码，仿JQUERYUI的Draggable或者是Dialog,希望大家喜欢，写的一个小东西。参考了下网上的其他人写的类似代码，但是不完全模仿

<html><head><meta charset="utf-8" /><style type="text/css">#typewords{}#write{}#container{ border:2px solid red; width:800px; height:500px;}#draggable{ position:absolute; z-index:5; width:200px; height:200px; top:20px; left:50px; border: 3px solid blue; }</style><script src="jquery.js"></script><script type="text/javascript">//拖动function Drag(){ $("#draggable").mousemove(function(event){ //得到X坐标和Y坐标 var x=event.clientX; var y=event.clientY; //得到可拖动框的高度和宽度 var widthX=$("#draggable").width(); var heightY=$("#draggable").height(); //alert("x:"+ x+"width:"+widthX); //确定拖动的时候X,Y的值 $("#draggable").css("top",y-50+"px"); $("#draggable").css("left",x-50+"px"); }); }function MouseUp(){ $("#draggable").mouseup(function(){ if(window.captureEvents) { window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); var d = document; d.onmousemove = null; d.onmouseup = null; } //解除mousemove的绑定 $("#draggable").unbind("mousemove"); }); }//鼠标拖动DIV,鼠标按下去的事件//alert('1');$(document).ready(function(e) { //鼠标按下去的时候执行下面的代码 $("#draggable").mousedown(function(){ Drag(); //鼠标点击的时候取消事件绑定 MouseUp(); });});</script></head><body><!--输入文字 --><div><input id="typewords" type="text" />&nbsp;&nbsp;<input type="button" id="write" value="写心情" /></div><br /><hr /><!-- container,里面包含了心情的内容--><div id="container"> <!--可拖动的DIV --> <div id="draggable"> 测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据 </div></div></body></html>

运行效果如下：

希望本文所述对大家的jquery程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章