jquery實現仿JqueryUi可拖動的DIV實例

2019-11-20 11:56:54

字體：大中小

來源：轉載

供稿：網友

本文實例講述了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" />  <input type="button" id="write" value="寫心情" /></div><br /><hr /><!-- container,里面包含了心情的內容--><div id="container"> <!--可拖動的DIV --> <div id="draggable"> 測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據測試數據 </div></div></body></html>

運行效果如下：