jQuery拖拽插件制作拖拽排序特效

基于jQuery拖拽插件制作拖拽排序特效是一款非常实用的鼠标拖拽布局插件。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<h1>水平拖拽</h1>

<div class="demo">
    <div class="item item1"><span>1</span></div>
    <div class="item item2"><span>2</span></div>
    <div class="item item3"><span>3</span></div>
    <div class="item item4"><span>4</span></div>
    <div class="item item5"><span>5</span></div>
</div>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.dad.min.js"></script>
<script>
$(function(){
    $(‘.demo‘).dad();
});
</script>

<!-- 以下信息与演示无关,可不必理会 -->
<style>
body { margin: 0; border-left: 200px solid #ccc;}

h1 { width: 1000px; margin: 40px auto; font: 32px "Microsoft Yahei";}
.demo { width: 1000px; margin: 0 auto;}

.menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; padding-top: 100px; font-family: Consolas,arial,"宋体"; background-color: #ccc;}
.menu a { display: block; height: 40px; margin: 0 0 1px 2px; padding-left: 10px; line-height: 40px; font-size: 14px; color: #333; text-decoration: none;}
.menu a:hover { background-color: #eee;}
.menu .cur { color: #000; background-color: #fff !important;}

.thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid transparent;}
</style>

<div class="menu">
    <a class="cur" href="index.html">1、水平拖放</a>
    <a href="index2.html">2、垂直拖放</a>
    <a href="index3.html">3、多行拖放</a>
    <a href="index4.html">4、指定拖动区域</a>
    <a href="index5.html">5、回调函数</a>
    <a href="index6.html">6、允许/禁止拖放</a>
    <a href="index7.html">7、仿垃圾篓</a>
    <a href="index8.html">8、仿购物车</a>
</div>

via:http://www.w2bc.com/article/93524

时间: 2024-10-24 16:46:00

jQuery拖拽插件制作拖拽排序特效的相关文章

使用jQuery的Highcharts插件制作图标如何绑定数据

基于mvc的Razor语法,实现Highcharts图表插件的数据绑定 1.引用几个库文件 <script src="~/Scripts/jquery-1.8.2.min.js"></script> <script src="~/Scripts/Highcharts/highcharts.js"></script> <script src="~/Scripts/Highcharts/exporting.

jquery 的datatables插件问题(多列排序)

//按第二列降序排序, 出现提示: Datables wrning(table id='example'):Cannot reinitialise DataTable. To retrieve theDatables object for this table,please pass eithser no arguments to the dataTable() function, 解决方法: 1.加 "bDestroy":true,和"bRetrieve": tr

jquery插件之拖拽

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可以被拖拽至可视区域以外.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

JQuery之拖拽插件

一直以来,都对JS获取元素的位置感到非常的困惑:一会client.一会offset.一会scroll. 再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的. 而很多页面效果都要用到这些位置.不得已,得练练,得记记. 下面就来说说这个基于 JQuery的简易拖拽插件吧. 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤: 那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的. 放到我们的DOM上,就是改变它的位置. 它只有两个难点:1.如何知道是在拖? 2.如何知道从哪拖,拖到哪? 其实,

jquery拖拽插件Easydrag

在一些有弹出框的页面,会经常用到拖拽效果来增加用户体验,避免因弹出框遮挡一些元素.如果用原生的js来写的话,js兼容性很不好控制,经常由于浏览器事件的不统一而影响效果,今天给大家介绍一个拖拽插件easydrag,EasyDrag可以指定可拖动的区域,一个setHandler搞定,不错开源是个好东西,只需要一行代码便可轻松在主流浏览器上 使用方法示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

一步一步实现JS拖拽插件

js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:onmousedown,onmousemove,onmouseup.所以拖拽的基本思路就是: 1.用鼠标点击被拖拽的元素触发onmousedown (1)设置当前元素的可拖拽为true,表示可以拖拽 (2)记录当前鼠标的坐标x,y

vue拖拽插件(弹框拖拽)

// =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model="tags" :move="getdata" @update="datadragEnd"> <transition-group> <div class="testdiv" v-for="eleme

JQuery插件制作具有动态效果的网页

JQuery插件 制作具有动态效果的网页   前  言 JQuery 今天我给大家介绍一个运用JQuery插件制作的动态网页--iphone 5C 宣传页面.这个网页中运用到了fullpage.js和move.js两个插件. 动态效果           1导入插件 在这个页面中需要用到三款插件,分别是jquery-3.1.1.js(JQuery 3.1.1版本).jquery.fullPage.js(附带jquery.fullPage.css)和 move.js 动画插件. 导入顺序也如上所示

jQuery插件制作方法详解

jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了.其他事情插件全包.我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件.写一 个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件. jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加上Jt