<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background: #f00;
cursor: pointer;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script src="jquery.js"></script>
<script>
$(function(){
//移动窗口的步骤
//1、按下鼠标左键
//2、移动鼠标
$('div').mousedown(function(e){
// e.pageX
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
//alert(distenceX)
// alert(positionDiv.left);
$(document).mousemove(function(e){
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if(x<0){
x=0;
}else if(x>$(document).width()-$('div').outerWidth(true)){
x = $(document).width()-$('div').outerWidth(true);
}
if(y<0){
y=0;
}else if(y>$(document).height()-$('div').outerHeight(true)){
y = $(document).height()-$('div').outerHeight(true);
}
$('div').css({
'left':x+'px',
'top':y+'px'
});
});
$(document).mouseup(function(){
$(document).off('mousemove');
});
});
});
</script>
</body>
</html>
效果图：
相关推荐
"jq拖拽"指的是利用jQuery实现的拖放功能，这是一种用户交互技术，允许用户通过鼠标或其他输入设备将元素在界面上移动。在网页设计中，拖放功能可以提升用户体验，常见于文件管理器、日历应用、布局构建器等场景。 ...
JQ拖拽排序插件，支持排序，支持IE浏览器，整体拖拽和标题拖拽，使用方法 $("#test").dragsort({ dragSelector: ".file-panel",//拖拽的位置 dragEnd: function() { },//拖拽完成之后执行的方法 dragBetween: ...
在IT行业中，jQuery（通常简称为jq）是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。本话题主要聚焦于使用jQuery实现拖拽功能，并且扩展到支持双击事件。这在网页设计中非常常见，...
拖拽排序是一种用户交互设计，允许用户通过鼠标拖动来改变元素的顺序。这种功能在列表、菜单和表格中尤为常见，提供了直观和便捷的操作体验。在JavaScript中，我们可以监听鼠标事件来实现这一功能。 二、jQuery实现...
用JQuery写的拖动元素进行排序的方法，包含拖动排序、拖动移除、拖动添加。 代码完整可用。没有用到第三方插件，自主可控。 原理是用CSS中position定位来跟踪鼠标移动，就是让元素跟踪鼠标位置，然后判断其在页面...
"JQ实现拖拽上传并显示"是一个利用jQuery库实现的高效且用户友好的功能，它允许用户通过简单的拖放操作来上传文件，并实时显示上传进度。在本文中，我们将深入探讨如何使用HTML和jQuery实现这一功能，以及涉及的相关...
收藏的最好用的jq拖拽代码简单好用有注释一个方法调用,用过多次，重要的说三遍最好用的jq拖拽代码简单好用有注释一个方法调用；最好用的jq拖拽代码简单好用有注释一个方法调用。
jQuery拖拽360度旋转特效是一款基于jQuery框架 Reel插件的3D旋转特效代码，支持鼠标拖拽360度显示商品图，鼠标拖拽旋转的效果很流畅，特别适合做商品立体展示。 jQuery拖拽360度旋转特效演示图：
总的来说，实现jQuery拖拽图片并进行排序的功能涉及多个步骤，包括设置拖动和接收元素、处理拖放事件、更新图片顺序和提供用户反馈。通过熟练掌握这些技巧，可以创建出互动性强且易用的图片管理界面。
在这个场景下，"jq实现拖拽，可以选择显示的内容"指的是使用jQuery来创建一个具有拖放功能的交互式界面，用户可以拖动元素并选择显示特定内容，这一功能在很多应用中都很常见，例如QQ空间的相册拖拽布局。...
标题中的“JQ 精简的拖动框”指的是使用jQuery库实现的一个轻量级的可拖动对话框或窗口的功能。在网页交互设计中，拖动框常常用于创建可移动的弹出窗口，如设置面板、提示信息或者自定义组件。这种功能可以使用户...
标题 "JQ 拖动代码" 指向的是一个使用 jQuery（通常简称为 JQ）库实现的拖放功能的代码示例。jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等任务。在网页开发中，...
html 非常好 jq 可拖拽布局组件 向不同方向jq 可拖拽布局组件
本文将详细介绍JQ UI中的拖拽功能，以及如何实现一个兼容性高的拖拽DIV插件。 首先，让我们了解JQ UI的拖拽功能。在JQ UI中，`draggable()` 是一个核心方法，用于将元素变为可拖动的。通过调用此方法并传入相应的...
这个“JQ实现DIV大小、位置拖动调整源码”是一个基于jQuery的解决方案，它使得开发者能够为网页上的元素添加动态的拖放功能，提升用户体验。 jQuery（简称JQ）是一个轻量级的JavaScript库，它简化了HTML文档遍历、...
"jQuery手机触屏拖拽"技术就是为此而生，它允许用户通过手指在触屏上的滑动来拖动页面元素，比如实现图片轮播效果。 【描述】：在“jQuery手机触屏滑动图片轮播效果代码”中，我们主要关注的是移动端图片的拖拽切换...
在本文中，我们将深入探讨如何使用JavaScript库JQuery实现图片的放大缩小和拖动功能。JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得前端开发更加高效。在这个项目中，"magnify-...
本篇文章将聚焦于一个特定的应用场景：使用jQuery实现拖拽功能来动态添加div，并保存拖拽后的位置效果。这个功能在网页布局、可配置界面或者拖放式应用设计中非常常见。 首先，我们需要理解jQuery UI中的Draggable...
在JavaScript和jQuery的世界里，实现元素的拖拽（Draggable）和吸附（Docking）功能是一项常见的需求，尤其是在创建交互式用户界面时。本篇将深入讲解如何利用这两种技术来增强网页的动态性和用户体验。 首先，...