手机版

jquery实现仿JqueryUi可拖动的差异实例

时间:2021-09-08 来源:互联网 编辑:宝哥软件园 浏览:

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

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

html health neta charset=' utf-8 '/style type=' text/CSS ' # type words { } # write { } # container { border :2 px }纯红;宽度宽度:800像素高度:500 px} #可拖动{ position : absolutez索引:5;宽度宽度:200像素高度:200 pxtop :20 pxleft :50 pxborder : 3px纯蓝;}/style脚本src=' http : jquery。js '/script脚本类型=' text/JavaScript '//拖动函数拖动(){ $(' #可拖动').鼠标移动(函数(事件){ //得到X坐标和Y坐标var x=event . clientx var y=event.clientY//得到可拖动框的高度和宽度var width x=$(' #可拖动').宽度();var heightY=$('#draggable ').高度();//alert(' x : ' x ' width : ' width x);//确定拖动的时候x,Y的值$(' #可拖动')。css('top ',y-50 ' px ');$(' #可拖动')。css(“”左,x-50 ' px ');});}函数MouseUp(){ $(' #可拖动').鼠标上移(function(){ if(window。captureevents){ window。捕捉事件(事件.鼠标移动|事件. MOUSUP);var d=文档;d . onmousemove=null d . onmouseup=null }//解除鼠标移动的绑定$(' #可拖动')。解除绑定(“鼠标移动”);});}//鼠标拖动DIV,鼠标按下去的事件//alert(' 1 ');$(文档)。就绪(功能(e) { //鼠标按下去的时候执行下面的代码$(' #可拖动')。鼠标向下(函数(){ Draw();//鼠标点击的时候取消事件绑定MouseUp();});});/剧本/床头柜!-输入文字-divinput id=' type words ' type=' text '/input type=' button ' id=' write ' value='写心情//divbr /hr /!-集装箱,里面包含了心情的内容- div id='容器!-可拖动的' DIV - div id='可拖动'测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据/div/div/body/html运行效果如下:

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

版权声明:jquery实现仿JqueryUi可拖动的差异实例是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。