Sortable.js设置当前拖拽行背景色

2024-10-20

sortable.js 拖拽排序及配置项说明

// 拖动排序 $(function() { /*排序*/ //排序 // Simple list ]; new Sortable(list, { group: "name", animation: , //动画参数 store: null, // @see Store /* handle: ".BtnMove",*/ // 点击目标元素开始排序(只能拖拽当前元素) draggable: ".application-li", // 指定那些选项需

vuejs2.0使用Sortable.js实现的拖拽功能

简介在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. 实现效果实现后的效果如图所示:

Vue.Draggable：基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一个办法就是通过index根据列表索引添加背景问题:拖拽是可以换动顺序的,所以不管我怎么拖动,背景的顺序并不不会变. 2 - 第二个办法是,通过动态给列表绑定ID,通过id来添加背景,这总没问题了吧问题: 很奇怪的问题,我现在也没有理解,换动顺序以后,查看HTML元素,确实id是根据顺序变换了的,

vue2.0使用Sortable.js实现的拖拽功能

简介在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jQuery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的案例使用的require.js加载. html主要代码 <dragga

vuejs2.0使用Sortable.js实现的拖拽功能( 转)

文章目录简介实现效果 html主要代码 css代码 js代码简介在使用vue1.x之前的版本的时候,页面中的拖拽功能,我在项目中是直接用的jquery ui中的sortable.js,只是在拖拽完成后,在update的回调函数中又重新排序了存放数据的数组.但是当把vue升级到2.0以上后发现拖拽功能失效了,于是使用了下面代码. 该案例主要是在用于vuejs2.0中实现的拖拽功能,用到的的js有Sortable.js,vuedraggable.js,当然还有vue.min.js,提供的

php和js实现文件拖拽上传

Dropzone.js实现文件拖拽上传 http://www.sucaihuo.com/php/1399.html demo http://www.sucaihuo.com/jquery/13/1399/demo/ zyupload四种不同的PHP上传demo http://www.sucaihuo.com/php/1085.html demo http://www.sucaihuo.com/jquery/10/1085/demo/

JS Event 鼠标拖拽事件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>JS Event鼠标拖拽事件</title> <style> #box{width:200px;height:200px;background:#000;position:absolute;}

Dropzone.js实现文件拖拽上传

dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件.支持最大文件大小.支持设置文件类型.支持预览上传结果,不依赖jQuery库. 使用Dropzone 我们可以建立一个正式的上传form表单,并且给表单一个.dropzone的class. <form id="mydropzone" action="/upload.php" class="dropzone"></form>

纯JS实现可拖拽表单

转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时

纯js实现DIV拖拽

写代码的时候遇到需要对绝对布局的div进行拖拽的功能,起初为了省事直接在网上扒拉了一番,看到大神张鑫旭的一篇文章<JavaScript实现最简单的拖拽效果>,便直接拿来使用(膜拜大神).但发现这段代码使用前必须设置top和left样式属性,否则拖动时div会有跳动,而且不支持多个div的拖动.于是对代码大概修改了一番,贴在这里,以备后用,希望大神勿怪. /** * 纯js实现多div拖拽 * @param bar, 拖拽触柄 * @param target, 可拖动窗口 * @param in

H5 拖拽,一个函数搞定,直接指定对象设置可拖拽

页面上,弹个小窗体,想让它可以拖拽,又不想加载一堆js,就简单的能让他可以拖动? 嗯,下面有这样一个函数,调用下就好了! 1. 先来说说 H5的拖拽在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 设置元素为可拖放首先,为了使元素可拖动,把 draggable 属性设置为 true : <img draggable="true" /> 拖动开始 - ondragstart 和 setData() 当元素被拖动时,要发生什么. 如,ondragstart

js仿QQ拖拽删除

原生js实现仿QQ拖拽删除交互,无需任何依赖. 项目演示请看这里, gitHub请移步这里. 由于源码很长,所以贴到最下面了. 效果截图如下: 核心思想呢,就是点击圆点的时候全屏覆盖个canvas,在canvas上画出想要的效果. 原理: 1.点击圆点,生成全屏canvas,画出两个圆 , 在原地画圆,根据拉动距离变小, 在手指触控的位置,跟随手指画圆. 2.计算两圆位置,计算两圆的切点位置,通过两圆切断位置画贝塞尔曲线填充,模拟粘性. 3.判断距离是否超出最大距离,做出对应动作. 看似简单,但

JS鼠标的拖拽原理

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开二.拖拽流程中对应的JS事件①鼠标按下会触发onmousedown事件 obj.onmousedown = function(e) { //.......... } ②鼠标移动会触发onmousemove事件 obj.onmousemove = function(e) { //...... } ③鼠

js插件-简单拖拽

前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/ 是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g

js实现可拖拽的div

前言下午忙里偷闲想写一个可拖拽的例子,留在脑海里一直都是三个事件mouseDown,mouseUp,mouseMove, 但从没有动手实践过,今天想起了自己实践了并学习了张鑫旭的demo实现. 学习张鑫旭代码的同时又了解了几知识点. 1.obj.currentStyle[attr] 和getComputedStyle(obj,false)[attr].获取DOM非行间样式. 我百度了下currentStyle看到有的说Chrome和FF是不支持的,为了兼容,所以用到了这两个方法. 2.onse

用JS实现版面拖拽效果

类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件通过获取鼠标的坐标(clientX,clientY)来改变面板的位置注意:面板使用绝对定位方式,是以左上角为参考点,所以我们还需要获取鼠标在面板的位置,也就是以鼠标所在位置为参考点. // 光标按下时光标和面板之间的距离 disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetTop; 添加onmousemove事件在获取了鼠标相对

angular-dragon-drop.js 双向数据绑定拖拽的功能

在做公司后台物流的时候,涉及到34个省市分为两个部分,一部分为配送区域,另一部分为非配送区域,想利用拖拽的功能来实现,最好两部分的数组能自动更新. 刚好找到angular-dragon-drop.js 插件来实现.通过拖拽可以自动更新数组元素. // 比如 <script> var arr1=[{name:'wang',id:11,city:'beijing'},{name:'chang',id:22,'hangzhou'}]; var arr2=[]; </script> //a

js制作可拖拽可点击的悬浮球

兼容mouse事件和touch事件,支持IE9及其以上效果展示:https://jsfiddle.net/shifeng/7xebf3u0/ // index.html <!DOCTYPE html> <html lang="en">  <!-- saved from url=(0014)about:internet

前端js区域上下拖拽

先说说需求吧,网页内又上下两个区域,需要做到的功能是,第一个区域A底部的边可以进行拖拽使得区域变大或变小,同时第二个区域B跟着拖动的变化进行自适应. 思路: 1.使用一个假的div定义为那条可进行拖拽的线.需要设定一个变动的高度,因为可拖动的线也需要根据拖动区域的改变而改变. 2.定义好鼠标触发事件,事件主要分为三个部分:鼠标移动.鼠标抬起和鼠标按下. 事件的内容很简单,就是返回拖拽的高度变化top即可. 3.对刚才定义好假的拖拽线进行事件绑定.根据自己的需求和获取到的高度来设计A.B两个区域需

js实现回放拖拽轨迹-------Day48

今天有点小高兴,csdn博客浏览量过万了,在过去还从来没有过这么高的浏览量呢.不得不说.太多时候还是有些矫情.可看到这些鼓舞还是忍不住高兴啊,至少,这样让我有一种行内人员的感觉,吾道不孤啊. 闲话不多说.继续今天的记录,记录回放拖拽痕迹,先从过程上进行分析: 1.要实现回放拖拽痕迹,则必须先有记录: 2.要记录拖拽痕迹,则必需要实现拖拽. 这个问题前几天以前做到过.当时实现的也略有瑕疵,但大致的实现方法已经了然于胸.所以今天在实现这个问题的时候速度快了不少,着实高兴了一番,今天再实现了一遍之后理

原生js简单实现拖拽效果

实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px.高200px的登录框 <div id="login"> <div id="box">登录窗</div> </div> <style> *{ padding: 0;margin: 0; } #login{ wi

Sortable.js设置当前拖拽行背景色

热门专题