拖拽插件SortableJS

在项目中,经常会遇到一些涉及到拖拽的需求,github上面有一个开源的SortableJS的插件,支持Vue,React,Angular等多种框架,实现效果很好,基本可以满足大部分的需求,下面就第一次在jquery中的使用做个简单的demo记录. 引入文件Sortable.min.js 指定包裹容器的id 根据api开始创建使用即可 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />…

jQuery网页元素拖拽插件

效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置半透明和拖拽半透明的效果选项,可根据需要选择.另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,模拟Windows窗口点击置顶效果.演示地址:http://frontendcode.sinaapp.com/J-Lui/jQuery-jLdraggable-plugin/ js/jquery.jLdraggable.js: ;(function($){ $.fn.extend({ "j…

网站开发常用jQuery插件总结(三）拖拽插件gridster

1.gridster插件功能实现类似于win8 磁贴拖拽的功能 2.gridster官方地址 http://gridster.net/ 在官方的网站上也有插件的帮助和实例,但是按照官方的说明,我在本地测试总是出现这样那样的问题,一是无法移动,二是在磁铁的附近有一个黑点,可能是定位使用的.但是如果在网站中正常使用,应该不会出现这样的黑点.gridster插件的属性和方法在官网上有详细说明. 经过测试了一下,最后终于解决了问题.效果显示如下: 3.gridster使用方法 1.首先引用js文件 <…

JQuery之拖拽插件

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

一步一步实现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…

自己写一个jqery的拖拽插件

说实话,jQuery比原生的js好用多了,本来想用原生写的,也写出来的,仅仅是,感觉不像插件,所以用jQuery实现了一版. 实现的功能:能够指定拖拽的边界,在拖拽过程中,能够触发几个自己定义事件先说明一下我写的插件的原则: 1.常量分离出来,放在$.zUI.插件中 2.插件的主体运行函数命名为$.zUI.插件.fn 3.销毁函数命名为$.zUI.插件.unfn 这些规范,主要是为了以后写其它插件时,放在一起,精简代码用的,以后可能还会添加�其它规则,以写出一个骨架来. 拖拽的原理事实上比較简…

好用的JS拖拽插件

下载artDialog插件的时候发现它把拖拽单独封装成了一个方法,挺好用的,使用方法如下... 第一种拖拽方式-点击容器指定区域进行拖拽 $('.ui-dialog').on(DragEvent.types.start, '[i=title]', function(event) { DragEvent.create($('.ui-dialog')[0], event); }); 第二种拖拽方式-点击整个容器进行拖拽 DragEvent.create($('.ui-dialog')[0]); 拖拽…

jquery拖拽插件 tableDnD

http://www.jb51.net/article/39481.htm http://www.poluoluo.com/jzxy/201307/232615.html…

jq拖拽插件

(function ($) { var move = false; //标记控件是否处于被拖动状态 var dragOffsetX = 0; //控件左边界和鼠标X轴的差 var dragOffsetY = 0; //控件上边界和鼠标Y轴的差 var dragObj = null; //用于存储当前对象 $.fn.mydrag = function () { dragObj = this; this.mousedown(function (e) { move = true; //获取鼠标和该控件…

jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

一.原生JavaScript编写拖拽效果二.jQuery编写的拖拽效果三.在jQuery中拓展一个拖拽插件…

jquery插件之拖拽

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

简洁的drag效果，自由拖拽div的实现及注意点

偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下. 先说一下实现原理及要点,最主要的有三步.第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪.第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果.第三步是mouseup事件,鼠标弹…

AngularJS之拖拽排序（ngDraggable.js）

ngDraggable.js是一款比较简单实用的angularJS拖拽插件,借助于封装好的一些自定义指令,能够快速的进行一些拖拽应用开发.首先先介绍一些基本的概念; ng-drop:是否允许放入拖拽元素 ng-drop-success($data, $event):拖拽元素放入的回调;$data:放入元素数据:$event拖拽事件对象 ng-drag:元素是否允许拖拽 ng-drag-success($data, $event):$data:拖拽元素数据,$event拖拽元素事件对象 ng-dr…

sortable实现拖拽功能

使用sortable这个强力插件就很容易实现拖拽功能,它是目前比较牛逼的拖拽插件,无需jquery,就可以全面支持pc和移动,参考以下github文档就有很详细的说明,也给了很多 demo,插件就用我给你的那个就可以,不用额外添加其他库 GitHub:https://github.com/RubaXa/Sortable 以下的simple demo是我自己写的,就这么几行简单代码就完事了 simple demo: html code: <input type="hidden" v…

vue el-transfer新增拖拽排序功能---sortablejs插件

<template>  <el-transfer ref="transfer" id="transfer" v-model="value" target-order="unshift" :data="datas" fi…

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

一 . 背景及效果当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片文件上传也需要:选择路径再->上传->插入,步骤繁杂,互联网体验为王,如果支持截图粘贴上传.拖拽上传将大大提升体验. 当前知乎和github对现代浏览器均支持这两种特性,闲来无事就学习实现了一下,今天就说一说这个1kb插件实现什么功能,怎么使用和原理. 首先看一下插效果: 截图后直接粘贴上传. 拖…

jQuery插件（拖拽）

拖曳插件draggable的功能是拖动被绑定的元素,当这个jQuery UI插件与元素绑定后,可以通过调用draggable()方法,实现各种拖曳元素的效果,调用格式如下: $(selector). draggable({options}) options参数为方法调用时的配置对象,根据该对象可以设置各种拖曳效果,如“containment”属性指定拖曳区域,“axis”属性设置拖曳时的坐标方向. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T…

不断优化，重构我的代码-----拖拽jquery插件

最近学东西学的有点太散了,歇一阵子,重新完善之前的JQ插件,今天先上拖拽吧 // JavaScript Document (function($){ var defaults = { actionElement : "", //获得事件的元素,非必填项 rangeElement : window, //可拖动范围的元素非必填 direction : "", //默认为空,表示何以任意拖动, 可选值为vertical或者horizontal magnetic : 0…

可拖拽和带预览图的jQuery文件上传插件ssi-uploader

插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 简要教程 ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非常方便. 安装可以通过bower或npm来安装ssi-uploader文件上传插件. b…

jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. 多张图片切换,键盘左右键或左右箭头切换 2. 旋转 3. 放大,支持鼠标滚轮 4. 缩小,支持鼠标滚轮 5. 右下角缩略图 6. 拖拽大图 7. 全屏 PS:下面是插件各状态下效果,demo示例会在最后放出来. 全屏全屏是容器的最大化. 缩小可以点击缩小图标或者鼠标滚轮向下滚,可以缩小图片. 放…

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty…

jquery插件之拖拽改变元素大小

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

linux chromuim安装常用插件(flash,手势,拖拽,广告屏蔽)

1.本机kali2.0 64位,kali基于Debian.文章所用的所有插件请到http://files.cnblogs.com/files/yuuyuu/chromium_plugins.tar.gz先下载. 2.安装chromium浏览器 sudo apt-get install chromium-browser 3.Chromium开源浏览器不再支持Netscape浏览器插件API,Adobe公司的Flash将无法正常工作了, 谷歌现在采用的是另一种接口,叫做Pepper(PPAPI)…

11个好用的jQuery拖拽拖放插件

这次我们整理一些拖拽播放类型的jQuery插件,这些可能不是很常用,但偶尔会有网站设计项目用到,特别是后台相关的开发项目,这个拖放排序功能一般都会有,所以适合大家收藏起来,方便日后使用.接下来一起看盾11个简单易用的jQuery拖拽拖放插件. JQuery Gridly Gridly是个网格式的拖放移位jQuery插件,这个插件交互不错,我们在拖动的时候会显示一些移动动画,效果很好看. 此插件还有其它特色功能,比如关闭.点击放大.增加模块等等. 演示及下载 Drag N Drop Scatter…

多文件上传插件Stream，是Uploadify的Flash版和Html5版的结合，带进度条，并支持html5断点续传(附件上传)，拖拽等功能

是根据某网的文件上传插件加工而来,支持不同平台(Windows, Linux, Mac, Android, iOS)下,主流浏览器(IE7+, Chrome, Firefox, Safari, 其他)的上传工作,当然在Html5标准下,还支持文件的断点续传功能,有效解决大文件的Web上传问题! 主要特征 1. 支持HTML5.Flash两种方式(跨域)上传 2. 多文件一起上传 3. HTML5支持断点续传,拖拽等新特性 4. 兼容性好IE7+, FF3.6+, Chrome*,Safari4+…

使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

前言需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问…

Thinkphp拖拽上传文件-使用webuploader插件（自己改动了一些地方）——分片上传

html页面: <!DOCTYPE html> <html class="js cssanimations"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Thinkphp拖拽上传文件-使用webuploader插件</title> <include …

HTML5 CSS3 经典案例：无插件拖拽上传图片（支持预览与批量）（二）

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31513065 上一篇已经实现了这个项目的整体的HTML和CSS: HTML5 CSS3 经典案例:无插件拖拽上传图片 (支持预览与批量) (一) 这篇博客直接在上篇的基础上完成,最终效果: 效果图1: 效果图2: 好了,请允许我把图片贴了两遍,方便大家看效果了~ 可以看出我们的图片的li的html其实还是挺复杂的,于是我把html文档做了一些修改: <span style=&quo…

自制一个H5图片拖拽、裁剪插件（原生JS）

前言如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图片拖拽.裁剪的插件.其实网上也有很多类似的插件,只不过有的功能冗余体积大,有的甚至还依赖jquery.索性自己搞一个轻量的,只是不支持缩放功能. DEMO(手机上看效果比较好,PC上没有兼容处理),原码实现这里简略说下实现过程,只截取部分代码片段,有兴趣的可以看下原码,反正也很简单. 图片上传…

【拖拽插件SortableJS】的更多相关文章