jquery实现盒子拖拽

这篇文章主要为大家详细介绍了jquery实现盒子拖拽动画效果,文,感兴趣的小伙伴们可以参考一下

核心代码部分

<script src="js/jquery-1.11.1.js"></script>
<script>
// 给小盒子绑定鼠标按下事件$(".small").bind('mousedown',function(){// 在整个页面移动事件$(document).mousemove(function(e){// 获取小盒子的left值    = 鼠标当前的x轴坐标-大盒子的总left值-小盒子宽度的一半var small_left = e.pageX-$(".big").offset().left-$(".small").width()/2;// 获取小盒子的top值    = 鼠标当前的y轴坐标-大盒子的总top值-小盒子总高度的一半var small_top = e.pageY-$(".big").offset().top-$(".small").height()/2;// 判断小盒子的left值if(small_left <0){small_left = 0;}else if(small_left > $(".big").width()-$(".small").width()){small_left = $(".big").width-$(".small").width();}// 判断小盒子的top值if(small_top <0){small_top = 0;}else if(small_top > $(".big").width()-$(".small").height()){small_top = $(".big").width-$(".small").height();}//改变小盒子的llet值和top值并添加鼠标抬起事件解绑移动$(".small").css({left:small_left,top:small_top})}).mouseup(function(){$(this).unbind("mousemove")})})</script>

html,css代码部分

<style>*{margin: 0; padding: 0;}.big{width: 800px; height: 800px;position: relative;margin: 20px auto;background: lightgray;}.small{width: 150px; height: 150px;position:absolute;background: lightsalmon;}
</style>
<div class="big"><div class="small"></div>
</div>

附图

jquery实现盒子拖拽相关推荐

html许愿墙源码,jQuery实现可拖拽的许愿墙效果
这篇文章主要介绍了jQuery实现可拖拽的许愿墙效果,可实现拖拽图片与层叠显示功能,涉及jQuery插件的简单使用,并附带demo源码供读者下载参考,需要的朋友可以参考下本文实例讲述了jQuery实 ...
html5图片拖拽删除,基于jquery插件实现拖拽删除图片功能
本文实例为大家分享了jquery插件实现拖拽删除图片功能的具体代码,供大家参考,具体内容如下实现以下效果完全拖出这个层,图片会消失,否则图片会回到原来的位置 #mydiv{ width:900px ...
html手机模块化,jQuery 移动端拖拽（模块化开发，触摸事件，webpack）
通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). ...
【JS案例】：实现盒子拖拽功能
JS小案例:实现盒子拖拽功能 HTML部分: <div id="box"></div> CSS部分: #box{width: 100px;height: 1 ...
jquery实现表格拖拽排序
1.引入:jQuery文件和jquery-ui.js <script src="@{'/public/javascripts/jquery-1.11.1.min.js'}" ...
jquery的sortable拖拽排序插件，顺序没发生改变则不请求
一.前言前几天刚做完排序,本来以为没什么问题的,结果今天被告知要优化一下..功能上是没问题,但是有一些小细节需要优化.比如我做的是每次拖拽完成之后,都在stop方法里面请求ajax保存顺序.但是要考 ...
Jquery 多行拖拽图片排序 jq优化
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
Jquery实现可拖拽的树菜单
效果图例如以下所看到的:下载地址http://download.csdn.net/detail/javaquentin/8290417 <html xmlns="http://www. ...
JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...

jquery实现盒子拖拽

核心代码部分

html,css代码部分

附图

jquery实现盒子拖拽相关推荐

最新文章

热门文章