jquery는 JqueryUi와 유사한 드래그 가능한 DIV 인스턴스_jquery를 구현합니다.-JS 튜토리얼-php.cn

jquery는 JqueryUi와 유사한 드래그 가능한 DIV 인스턴스_jquery를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:47:46

원래의

1224명이 탐색했습니다.

이 문서의 예에서는 jquery가 JqueryUi를 모방한 드래그 가능한 DIV를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

JQUERYUI의 Draggable이나 Dialog를 모방하여 Jquery로 작성한 코드입니다. 마음에 드셨으면 좋겠습니다. 인터넷에서 다른 사람들이 작성한 유사한 코드를 참고했지만 완전히 모방하지는 않았습니다

<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>

로그인 후 복사

작동 효과는 다음과 같습니다.

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.