<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<script src="jquery-1.10.1.min.js" ></script>
<style>
.page{text-align:left;}
.dragDiv{border:1px solid #ddd; padding:10px; width:300px; margin:0 auto; border-radius:4px; box-shadow:0 1px 2px #fefefe; position: fixed; cursor:move;}
</style>
</head>
<body>
<div class="dragDiv" id="drag">
<div class="drag-head">点击拖动</div>
<div class="drag-body">
一站式网络<br/>
博客：<a href="http://onestopweb.iteye.com/" target="_blank">http://onestopweb.iteye.com/</a><br/>
网站：<a href="http://onestopweb.cn/" target="_blank">http://onestopweb.cn/</a>
</div>
</div>
<script type="text/javascript">
//视频小窗口播放和还原
//全局保存拖动的位置
var _drag = {};
_drag.top = 0; //拖动过的位置距离上边
_drag.left = 0; //拖动过的位置距离左边
_drag.maxLeft; //距离左边最大的距离
_drag.maxTop; //距离上边最大的距离
_drag.dragging = false; //是否拖动标志
//拖动函数
function bindDrag(el){
var winWidth = $(window).width(), winHeight =$(window).height(),objWidth = $(el).outerWidth(), objHeight = $(el).outerHeight();
_drag.maxLeft = winWidth - objWidth, _drag.maxTop = winHeight - objHeight;
var els = el.style,x=0,y=0;
var objTop = $(el).offset().top, objLeft = $(el).offset().left;
$(el).mousedown(function(e){
_drag.dragging = true;
_drag.isDragged = true;
x = e.clientX - el.offsetLeft;
y = e.clientY - el.offsetTop;
el.setCapture && el.setCapture();
$(document).bind('mousemove',mouseMove).bind('mouseup',mouseUp);
return false;
});
function mouseMove(e){
e = e || window.event;
if(_drag.dragging){
_drag.top = e.clientY - y;
_drag.left = e.clientX - x;
_drag.top = _drag.top > _drag.maxTop ? _drag.maxTop : _drag.top;
_drag.left = _drag.left > _drag.maxLeft ? _drag.maxLeft : _drag.left;
_drag.top = _drag.top < 0 ? 0 : _drag.top;
_drag.left = _drag.left <0 ? 0 : _drag.left;
els.top = _drag.top + 'px';
els.left = _drag.left+ 'px';
return false;
}
}
function mouseUp(e){
_drag.dragging = false;
el.releaseCapture && el.releaseCapture();
e.cancelBubble = true;
$(document).unbind('mousemove',mouseMove).unbind('mouseup',mouseUp);
}
$(window).resize(function(){
var winWidth = $(window).width(),
winHeight = $(window).height(),
el = $(el),
elWidth = el.outerWidth(),
elHeight = el.outerHeight(),
elLeft = parseFloat(el.css('left')),
elTop = parseFloat(el.css('top'));
_drag.maxLeft = winWidth - elWidth;
_drag.maxTop = winHeight - elHeight;
_drag.top = _drag.maxTop < elTop ? _drag.maxTop : elTop;
_drag.left = _drag.maxLeft < elLeft ? _drag.maxLeft : elLeft;
el.css({
top:_drag.top,
left:_drag.left
})
})
}
bindDrag(document.getElementById('drag'));
</script>
</body>
</html>
效果图：
相关推荐
html 非常好 jq 可拖拽布局组件 向不同方向jq 可拖拽布局组件
本文将详细介绍JQ UI中的拖拽功能，以及如何实现一个兼容性高的拖拽DIV插件。 首先，让我们了解JQ UI的拖拽功能。在JQ UI中，`draggable()` 是一个核心方法，用于将元素变为可拖动的。通过调用此方法并传入相应的...
"JQ弹出框效果"是指使用jQuery库来创建这样的功能。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务，使得开发者能够更高效地构建动态网页。 在描述中提到的“页面遮罩”...
"JQ实现拖拽上传并显示"是一个利用jQuery库实现的高效且用户友好的功能，它允许用户通过简单的拖放操作来上传文件，并实时显示上传进度。在本文中，我们将深入探讨如何使用HTML和jQuery实现这一功能，以及涉及的相关...
"JQ 复选框全选反选"是jQuery应用中的一个常见功能，主要用于增强用户界面的交互性。在网页中，复选框常常用于让用户多选选项，而全选和反选功能则提供了方便快捷的选择所有或取消所有选项的方式。 首先，我们需要...
在IT行业中，JavaScript是一种广泛使用的前端编程语言，而jQuery（简称JQ）是基于JavaScript的库，极大地简化了DOM操作、事件处理以及动画效果。在本主题中，我们将深入探讨如何利用jQuery和JavaScript实现拖拽排序...
"jq视差滚动框架特效"就是基于JavaScript库jQuery实现的一种视差滚动效果，它使得网页的动态展示更加生动有趣。 jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。...
"jq拖拽"指的是利用jQuery实现的拖放功能，这是一种用户交互技术，允许用户通过鼠标或其他输入设备将元素在界面上移动。在网页设计中，拖放功能可以提升用户体验，常见于文件管理器、日历应用、布局构建器等场景。 ...
HTML5和jQuery（JQ）结合使用可以创造出丰富的交互效果，比如这个"拖拽小案例"就是其中之一。在这个案例中，我们将重点讨论如何利用HTML5的拖放（drag and drop）API以及jQuery 3.3.1来实现图片的拖拽功能。 HTML5...
在这个场景中，"jq 表格拖拽"是指利用jQuery实现的一种功能，允许用户通过鼠标拖动来调整表格行或列的位置，提供更加互动和个性化的用户体验。这个功能在数据展示、数据分析或者任何需要用户自定义排序的场景中非常...
在IT行业中，jQuery（通常简称为jq）是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。本话题主要聚焦于使用jQuery实现拖拽功能，并且扩展到支持双击事件。这在网页设计中非常常见，...
收藏的最好用的jq拖拽代码简单好用有注释一个方法调用,用过多次，重要的说三遍最好用的jq拖拽代码简单好用有注释一个方法调用；最好用的jq拖拽代码简单好用有注释一个方法调用。
在这个场景下，"jq实现拖拽，可以选择显示的内容"指的是使用jQuery来创建一个具有拖放功能的交互式界面，用户可以拖动元素并选择显示特定内容，这一功能在很多应用中都很常见，例如QQ空间的相册拖拽布局。...
jq弹出框设计
《JQ轮播图精简版》是一款基于jQuery的轻量级轮播图插件，适用于网页中的图片或内容展示，具有简洁、高效的特点。在网页设计中，轮播图是一种常见的元素，它能以有限的空间展示多张图片或者信息，增加页面的动态效果...
标题中的“JQ 拖拽”指的是使用 jQuery（通常简称为 JQ）库实现的拖放功能。jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。在网页交互中，拖放功能允许用户...
JQ拖拽排序插件，支持排序，支持IE浏览器，整体拖拽和标题拖拽，使用方法 $("#test").dragsort({ dragSelector: ".file-panel",//拖拽的位置 dragEnd: function() { },//拖拽完成之后执行的方法 dragBetween: ...
《JQ 表单验证精简版》 在网页开发中，表单验证是一项不可或缺的功能，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的安全性。JQuery（简称JQ）作为一款强大的JavaScript库，提供了丰富的...
用JQuery写的拖动元素进行排序的方法，包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件，自主可控。 原理是用CSS中position定位来跟踪鼠标移动，就是让元素跟踪鼠标位置，然后判断其在页面...