新浦京81707con > 功能介绍 > jquery实现简单的拖拽效果实例兼容所有主流浏览

原标题:jquery实现简单的拖拽效果实例兼容所有主流浏览

浏览次数:119 时间:2019-08-21

在没给大家大快朵颐实现代码之前,先给我们体现下效果图:

gridster.js 是一个 jQuery 插件用来创设直观的可拖放的布局,扶助多列布局,你还足以动态的丰裕和删除表格中的成分。

近来发觉web网页的拖拽效果,个人以为是一种科学的顾客体验,抽空探究了一下,原理还蛮容易的,上边贴一下自己写的二个简易拖拽jquery自定义函数。
jquery代码:fun.js

xpj线路检测 1

1.gridster插件功效

复制代码 代码如下:

xpj线路检测 2

福寿无疆类似于win8 磁贴拖拽的职能

jQuery.fn.myDrag=function(){
_IsMove = 0;
_MouseLeft = 0;
_MouseTop = 0;
return $(this).bind("mousemove",function(e){
if(_IsMove==1){
$(this).offset({top:e.pageY-_MouseLeft,left:e.pageX-_MouseTop});
}
}).bind("mousedown",function(e){
_IsMove=1;
var offset =$(this).offset();
_MouseLeft = e.pageX - offset.left;
_MouseTop = e.pageY - offset.top;
}).bind("mouseup",function(){
_IsMove=0;
}).bind("mouseout",function(){
_IsMove=0;
});
}

xpj线路检测 3

2.gridster官方地点

xpj线路检测 ,html代码:

切切实实贯彻代码如下所示:

复制代码 代码如下:

index.html

在官方的网址上也可能有插件的帮助和实例,但是依照合法的注解,小编在地点测验总是出现这么那样的难题,一是无力回天移动,二是在磁铁的周围有二个黑点,也许是牢固应用的。可是假诺在网址中平常使用,应该不会现出如此的黑点。gridster插件的属性和方法在官互连网有详细表达。

<html>
<head>
<title>demo.htm</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="myFun.js" type="text/javascript"></script>
<style type="text/css">
.myDiv{
background:#EAEAEA;
width: 100px;
height: 100px;
border: 1px solid;
cursor: pointer;
text-align: center;
line-height: 100px;
}
</style>
<script type="text/javascript">
$(function(){
$("#myDiv").myDrag();
$("#myDiv2").myDrag();
})
</script>
</head>
<body>
<div id="myDiv" class="myDiv">拖拽1</div>
<div id="myDiv2" class="myDiv">拖拽2</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>iNettuts - Welcome!</title>
  <link href="inettuts.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <div id="head">
  <h1>iNettuts</h1>
 </div>
 <div id="columns">
  <ul id="column1" class="column">
   <li class="widget color-green" id="intro">
    <div class="widget-head">
     <h3>简介窗口</h3>
    </div>
    <div class="widget-content">
     <p>如果你活着,早晚都会死;如果你死了,你就永远活着。</p>
    </div>
   </li>
   <li class="widget color-red"> 
    <div class="widget-head">
     <h3>窗口标题</h3>
    </div>
    <div class="widget-content">
     <p>世界上本没有路,有了腿便有了路。</p>
    </div>
   </li>
  </ul>
  <ul id="column2" class="column">
   <li class="widget color-blue"> 
    <div class="widget-head">
     <h3>窗口标题</h3>
    </div>
    <div class="widget-content">
     <p>一个人只能全力以赴,等待命运去揭晓答案。</p>
    </div>
   </li>
   <li class="widget color-yellow" id="dingzh"> 
    <div class="widget-head">
     <h3>窗口标题</h3>
    </div>
    <div class="widget-content">
     <p>望着沧茫大海,令我得到片刻解脱;不怀缅过去,也不展望未来。</p>
    </div>
   </li>
  </ul>
  <ul id="column3" class="column">
   <li class="widget color-orange"> 
    <div class="widget-head">
     <h3>窗口标题</h3>
    </div>
    <div class="widget-content">
     <p>就像这些樱花,每个生命都会凋零。每吸一口气,每喝一杯茶,每杀一个人都能体悟人生,这就是武士精神。</p>
    </div>
   </li>
   <li class="widget color-white"> 
    <div class="widget-head">
     <h3>窗口标题</h3>
    </div>
    <div class="widget-content">
     <p>人应竭尽所能,然后听天由命。</p>
    </div>
   </li>
  </ul>
 </div>
 <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
 <script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
 <script type="text/javascript" src="inettuts.js"></script>
</body>
</html>

因此测量检验了一下,最终到底化解了难点。效果显示如下:

效果图1:
xpj线路检测 4 
效果图2:
xpj线路检测 5

本文由新浦京81707con发布于功能介绍,转载请注明出处:jquery实现简单的拖拽效果实例兼容所有主流浏览

关键词: 新浦京81707con

上一篇:解决方法,爬虫学习笔记

下一篇:没有了