css 设置拖拽状态样式

2024-11-02

Css3中拖拽效果的实例(带有注释~欢迎指教)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ text-align: center; } .container{ display: flex; justify-content: center; } .colorBox{ width:

css 可拖拽列表

<!DOCTYPE HTML> <html><head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"> b

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化. clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

CSS之拖拽库2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Conten

css设置滚动条颜色与样式以及如何去掉与隐藏滚动条

我们大家在浏览网页的时偶尔会看到很漂亮的各种颜色样式的滚动条,这就是通过css代码控制来实现的,于是本人搜集整理一番,这里和大家分享一下使用CSS设置滚动条颜色以及如何去掉滚动条的方法,需要的朋友可以参考下,很有用的 div { scrollbar-face-color: #fcfcfc; scrollbar-highlight-color: #6c6c90; scrollbar-shadow-color: #fcfcfc; scrollbar-3dlight-color: #fcfcfc; s

css设置兼容的透明样式

css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8;} </style> 对于IE浏览器,透明度值为1-100,其他浏览器取值为1-10:IE浏览器设置的80相当于其他浏览器设置的0.8. 值越小透明度越大,所有浏览器都一样.

css设置网页文本选中样式

网页的默认的文本选中颜色是蓝底白字(大多应该是吧),这个样子: 感觉并不是特别好看,可以通过CSS3的一个特性,一个CSS3的伪类选择器::selection来设置文本被选中时的状态,比如本博客的主题(2016-10-7): /*设置文本选中颜色,看起来更酷一些*/ ::selection { background:#DDDDDE; } ::-moz-selection { background:#DDDDDE; } ::-webkit-selection { background:#DDDDD

CSS - 设置 select 元素的样式

注意:option 外面有个框,这个框不同浏览器生成的还不一样,给这个框设置样式的方法也没有找到(有说法是这是浏览器创建的 shadow dom 没法设置).所以要想完全控制还是用列表进行模拟比较好. 设置 select 元素样式主要是要将那个默认的图标给改掉,方法一般来首有三种: appearance: none隐藏默认图标. overflow: hidden截去默认图标. ::after覆盖默认图标,为了不让 ::after伪元素作为事件的目标要设置pointer-events: none.

html网页什么样的字体最好看，css设置各种中文字体样式代码

css代码如下:{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera在css中使用英文表示法,以下附常见中文字体的英文名: 网页字体样式华文黑体:STHeiti网页字体样式华文楷体:STKaiti网页字体样式华文宋体:STSong网页字体样式华文仿宋:STFangsong网页字体样式黑体:SimHei ..... 参考

css设置点击态样式

.rightMenu:active { background-color: rgba(46, 103, 222, 0.13); }

Android之设置拖拽监听

以EditText为例: username.setOnDragListener(new OnDragListener() { @Overridepublic boolean onDrag(View v, DragEvent event) {// TODO Auto-generated method stubLog.i("touch", event.getX()+" "+event.getY()+" "+event.getAction()); re

css设置兄弟节点的样式（相邻的前一个节点）

产品需求:想在鼠标移动到“移除”的时候,“1.产品匹配测试”添加下划线和更改字体颜色需求分析:从需求可以看出使用 :hover 就可以解决的问题,但是在实践中发现兄弟选择器(+)不好使,(+)只能是之后的,那如果想要访问当前元素(假设为a)的前一个节点(假设为b)就不能了解决思路:对于相邻节点少的情况下可以将节点书写顺序颠倒(就是将a与b的位置换一下),然后在有排序就好啦,相关代码如下: <style> .history-desc{ height: 25px; line-height: 2

Android4.0 Launcher拖拽原理分析

在Android4.0源码自带的Launcher中,拖拽是由DragController进行控制的. 1) 先来看看类之间的继承关系 2)再来看看Launcher拖拽流程的时序图 1.基本流程: 相应的View在检测到用户操作后进行判断,若可以触发拖拽,则设置自身的相应状态,然后将待拖拽对象的Bitmap对象.当前位置.拖拽源.待拖拽对象等信息传给DragController的startDrag方法启动拖拽. 接下来,DragLayer的onInterceptTouchEvent拦截触屏事件

jQuery实现类似Chrome控制台可拖拽改变宽度的样式

最近项目进程紧张,没法再愉快的网上冲浪了因为项目需要实现一个页面上可拖拽改变div宽度的功能,类似效果如Chrome的右侧调试台样式: 大概思路为: 1.使用mousemove()方法,将鼠标的位置动态的赋予拖拽层 2.使用mousedown()方法,在鼠标被按下未抬起的过程中执行mousemove() 3.使用mouseup()方法,在鼠标按下并抬起后不执行mousemove() 实现步骤为: 先搭好页面静态样式 //左边区域 <div id="main"> <d

CSS设置input placeholder文本的样式

placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值. 下面是设置placeholder的文本样式的选择器的示例: /* webkit 浏览器*/ #field::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; } /* 火狐浏览器 */ #field::-moz-place

Javascript写的一个可拖拽排序的列表

自己常试写了一个可拖拽进行自定义排序的列表,可能写的不太好,欢迎提供意见. 我的思路是将列表中的所有项都放进一个包裹层,将该包裹层设为相对定位,每当点击一个项时,将该项脱离文档并克隆一份重新添加到文档末尾并通过设置绝对定位让它出现在同样的位置,而原本在它后面的项则会因为它脱离文档而自动填充空位,当鼠标松开时通过鼠标的位置计算出当前位置处于列表的第几项,让后再将克隆项插入到该项之前. 完整代码:演示 css: #main { width: 500px; margin:; padding:; bac

html5 Sortable.js 拖拽排序源码分析

最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 本帖属于原创,转载请出名出处. 官网http://rubaxa.github.io/Sortable/ 技术交流qq群 302817612 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上 ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件

一步一步实现JS拖拽插件

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

JavaScript | 模拟文件拖选框样式 v1.0

————————————————————————————————————————————————————————— 文件拖选v1.0 图片不清楚时请右键点击"在新链接中打开图片" 实现效果页面布局实现思路拖选框 css样式中设置拖选框样式,注意设置position: absolute;漂浮状态. 监听div#container的鼠标按下事件并获取起始坐标,鼠标按下时通过append()方法添加div#selectBox. 鼠标按下事件后鼠标移动事件,比较鼠标的当前位置event.

jQuery插件之路(三)——文件上传（支持拖拽上传）

好了,这次咱一改往日的作风,就不多说废话了,哈哈.先贴上源代码地址,点击获取.然后直接进入主题啦,当然,如果你觉得我有哪里写的不对或者欠妥的地方,欢迎留言指出.在附上一些代码之前,我们还是先来了解下,上传文件的时候需要利用的一些必要的知识. 首先我们要说的就是FileReader对象,这是一个HTML5提出的,专门用来异步的读取用户计算机上文件的对象,这里有详细的介绍.所以如果我们想要使用它,那么首先我们得先创建一个FileReader对象. var fr = new FileReader()

jQuery 鼠标拖拽排序

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试的拖拽功能</title> <style type="text/css"> body, div { margin: 0; paading: 0; f