javascript拖拽元素控件

2024-10-23

html5支持drag的拖放排序插件sortable.js

html5支持drag的拖放排序插件sortable.js <script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.5.1/Sortable.min.js"></script> //拖放+排序 Sortable.create(simpleList, { animation: 150, //动画参数 onSort: function(evt) { // console.log(settings.rowNum

ios 为什么拖拽的控件为weak 手写的strong

ib拖拽的控件自动声明为weak 而平时自己手写的为strong 在ios中,对象默认都是强引用,不是强引用赋值后会立即释放 ib声明weak 不立即被释放简单说就是 1.声明的弱引用指向强引用 2.加到了view中 @property (nonatomic, weak) UILabel * lab; ..... -(void)viewDidLoad { UILabel * label = [ UILabel alloc] init.... _lab = label; [self.view

swift方法的写法，ui上拖拽的控件到controller里面的方法

直接点xcode右上角三个按键中间一下,左右拆分为storyboard和controller, 点击button,按ctrl,然后拖拽到controller里面即可生成对应的点击事件在controller里面,之后做一系列编程,和winform这样的拖拽型的ui项目是一样,然后添加webview,在里面配置网址写web页面.

JavaScript实现拖拽元素对齐到网格（每次移动固定距离）

这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离.让元素都可以在网格内对齐.先上效果图,然后在详细说明一下细节问题做了一个gif图,可以看到,每次元素的移动都是按照最小单位距离移动的.且每次元素都是对齐到网格的. 先根据demo说明一下思路和细节,后面会给出demo代码. 1. 确定元素的每次移动的最小单位(demo中为10px和10px),也就是每次水平或垂直的位移量都是10px.铺上一层网格背景是为了帮助我们更好的看到效果

juqery 拖拽元素

转自 http://www.cnblogs.com/holbrook/archive/2012/03/13/2394111.html 因为怕博主删除博客,所以复制过来! JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量的第三方插件可以丰富JQuery UI的功能.JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(sou

Javascript 拖拽的一些高级的应用——逐行分析代码，让你轻松了解拖拽的原理

我们看看之前的拖拽在周围有东西的时候会出现什么问题? 在高级浏览器中不会有啥问题,我们放到IE7下面测试一下,问题就出来了.如图我们可以很清楚的看到,文字都已经被选中了.那这个用户体验很不好,用起来也不方便.顺便提一下,我们之前加了一个return false;帮我们解决了很多问题,如果去掉这个的话,chrome也会出现一样的问题.那么也就是说这个return false;可以解决chrome ff IE9+ 这些浏览器的问题. 实际上在我们开发中,页面上会有许多的元素组成,不可能就一个div

.NET成人礼 | 还记得20年前一起拖过的控件吗？

本文是MVP Ediwang写的回忆一个80后的拖控件的感悟,与君共勉: 每一代人都有记忆里的味道.煤球炉.黑白电视机是属于父母的记忆.而“拖控件”式编程,启蒙了无数像我这样的80后(嗯,89也算80后). 经典旧世 2000 年那个时候,上海这样的城市里也不是每家每户都有电脑,我家也没有电脑.我在学校经常听几位家里条件不错的同学说他们玩电脑的事情.CIH.千年虫等名词让我对电脑有着非常强烈的好奇心.而我第一次体验到计算机,是在我母亲单位的机房里.它是一台卧式机箱.15寸 CRT 凸面屏显示器的

Javascript 拖拽的一些简单的应用——逐行分析代码，让你轻松了解拖拽的原理

今天我们来看看如何让拖拽的物体不能拖出某个div之外和拖拽的吸附功能上次讲到我们的拖拽是不可拖出可视区范围的,在这基础上我们加个父级的div,不让他拖出父级.原理和之前的一样,简单吧. <div id="div2"> <div id="div1"> </div> </div> <style type="text/css"> #div1 { width: 100px; height: 1

Javascript 拖拽雏形中的一些问题——逐行分析代码，让你轻松了解拖拽的原理

今天我们就来解决上一次拖拽雏形中的一些问题.下面看看有哪些问题? 附上上期的Javascript代码,方便大家查看问题. <script type="text/javascript"> window.onload = function() { var oDiv = document.getElementById("div1"); var disX = 0; var disY = 0; oDiv.onmousedown = function(ev) { v

使用Appium-Desktop捕获APP元素控件实现自动化控制

使用Appium捕获APP的元素控件实现自动化控制我是用的是华为P20手机进行测试,为了映射出它的adb端口,需再去官网下载安装一个华为手机助手,然后将手机调成开发者模式,连接时选择传输文件模式. 启动Appium 直接点start server 配置测试APP信息点搜索按钮,进行app信息配置打开如下界面,按照以下几项属性配置信息, 保存 { "platformName": "Android", "paltformVersion":

关于js拖拽功能，拖拽元素的position:fixed;left:0;right:0;样式引起左右拖动元素会出现落后鼠标移动距离的问题

被拖拽元素的样式如果为:position:fixed;left:0;right:0;(当时是为了让fixed定位的元素水平居中加的left:0;right:0;避免js动态计算定位的麻烦)时左右拖动会出现拖动元素落后鼠标移动距离的问题,去掉right:0就可以了,而且如果只是去掉left:0还不行,还会是一样的情况...在chrome和IE下测试的情况,我的js是通过修改元素的left和top来实现拖动的,如果是right和top估计必须要去掉left才可以,这个以后有时间再测.

H5 拖拽元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .div1{ width: 200px; height: 200px; border: 1px solid red; position: rela

vue-drag-resize 可拖拽可缩放的标签，如何管理多个拖拽元素之间的zIndex？操作上需要保持当前激活的组件是最上层，但是在总体上，又要确保其图层管理的顺序。

麻烦总是不断出现,还好办法总比困难多, 1.公司开发一款可视化编辑html网页的多媒体编辑平台,牵扯到标签元素的拖拽,缩放,我找了找方法发现原生技术实现起来代码太多,麻烦,还好找到了一个vue组件,可以实现元素的拖拽,缩放,记录位置等等,如下: 2.组件好用,有各种事件,参数,属性可以使用,但是也遇到了一个麻烦事,各个标签之间,如何管理多个拖拽元素之间的zIndex?拖拽过程中这是必定会遇到并且无法逃避的一个问题,操作上需要保持当前激活的组件是最上层,但是在总体上,又要确保其图层管理的顺序.维护

javascript下用ActiveXObject控件替换word书签，将内容导出到word后打印第1/2页

由于时间比较紧,没多的时候去学习研究上述工具包,现在用javascript操作ActiveXObject控件,用替换word模板中的书签方式解决. 最近有需求将数据导出到word里,然后编辑打印. 想过几种方案: 1.使用jacob. 2.使用apache的poi. 3.使用itext. 由于时间比较紧,没多的时候去学习研究上述工具包,现在用javascript操作ActiveXObject控件,用替换word模板中的书签方式解决. 前提条件: 1.浏览器安全级别降低,可以使用ActiveXOb

js 鼠标拖拽元素

基础知识 event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcElemen

JS脚本动态给元素/控件添加事件

最近突然要用到JS脚本动态给元素添加事件.如TextBox的onclick事件.但有的onclick事件原先已经定义了相应代码!这里又不能替代原有方法,而JS脚本里面有个方法可以给控件在原有事件的基础上进行添加!同时又查了一下如何去掉之前的预定义的事件: <html> <script language="javascript"> function set() { var obj = document.getElementById("fy");

JQuery学习二（获取元素控件并控制）

$(’#id‘).+function; 例如: 1 <head> 2 <title>JQuery</title> 3 <script src="js/jquery-1.11.1.min.js"type="text/javascript"></script> 4 <script type="text/javascript"> 5 $(function () { alert($(

从 .NET 到 JavaScript —— 纯前端报表控件 ActiveReportsJS 焕新登场

报表工具的发展史,最早可以追溯到微软报表SSRS(SQL Server Reporting Services)时期.最初,报表工具主要应用于报表的定制.呈现和输出.经过几十年的发展,随着各种业务系统功能和结构的日趋复杂化,对报表工具“交互式.自助式.跨平台”的需求也在逐步攀升. 如今,一款优秀的报表工具,除了可以满足开发人员在不同的业务场景中,设计复杂结构报表和交互式报表的需求,还可以让开发人员将最大精力和时间投入到数据汇总.决策分析以及系统的UI表现层面. 葡萄城的 ActiveReports

javascript - 可编辑表格控件支持全键盘操作(无JS框架)

项目中经常会用到表格编辑控件,网上也有不少,但是确实没有完全符合我要求的, 自己写一个吧! 1.该控件支持数据显示列,文本编辑列,选择列,下拉列,索引列,删除列六种列类型 2.支持全键盘操作,自定义键位包括:列焦点切换,行焦点切换,新建行,数据保存(默认上,下,左,右键操作) 3.丰富的事件,绝大多数的客户端操作都能触发无刷新后台事件 4.支持统计运算,可自定义运算插件 5.兼容 Ie,chorme,firefox等绝大多数主流浏览器下载地址:http://files.cnblogs

[JavaScript]配置日期选择控件

我选择的日期控件是:bootstrap-datepicker(下载路径:https://github.com/Aymkdn/Datepicker-for-Bootstrap) 比较方便,实用.原来是英文的,我将它稍微改造了一下,替换了里面的英文,现在适合中国人用了. 网页中引用: <link rel="Stylesheet" href="/Scripts/datepicker.css" /> <script type="text/java

javascript——拖拽（完整兼容代码）

拖拽,是JS经常会用到的效果,在网上有很多的这样那样的拖拽效果,但其中往往大多有各种各养的问题,功能不全,无法兼容,而且修改的时候也是十分麻烦. 其实拖拽的原理很简单,无非是鼠标的三个动作的解析,以及对事件控制的理解.在此去繁化简,还原原汁原味的最易理解的拖拽原理. 实现鼠标需要三个事件,其实所以的拖拽都是围绕着 onmousedown(点击) onmousemove (移动) onmouseup( 松开),然后是一个最简单事件捕获,IE中位setCapture()方法 -----IE自身独有

javascript拖拽元素控件

热门专题