精华内容
下载资源
问答
  • 这是一款jquery透明拖拽窗口插件。该插件可以在页面生成可以拖拽、最大化、最小化的浮动窗口。
  • 悬浮窗口(透明+拖拽) 功能。 Delphi7版本。
  • 今天我们要分享一款可以拖拽的小窗口程序,这个窗口特效是利用jQuery UI和CSS3制作而成的,窗口是透明的,可以用鼠标拖拽,配合大气的山水背景图,显得非常壮观。拖拽功能是jQuery实现的,另外窗口的透明外观,...
  • 参考别的哥们的一个demo,在上面整改出的支持点击和拖拽事件区分.
  • Sortable.js 预设的拖拽的渐进色透明很难看谁用谁知道。我们可以把它改到正常的透明或实心颜色,甚至可以改变拖拽项的边框、颜色、提示等等。初始设置要用到forceFallback短板是不能用到支持 html5 浏览器的 ...

    208e45254f3287025f7b6c1447f11d20.png

    Sortable.js 预设的拖拽的渐进色半透明很难看谁用谁知道。我们可以把它改到正常的半透明或实心颜色,甚至可以改变拖拽项的边框、颜色、提示等等。

    初始设置要用到

    forceFallback

    短板是不能用到支持 html5 浏览器的 Drag and Drop 自带功能,我目测性能并没有可见区别。当然可能是我几十行数据量不够大。

    然后在css里面加,就这么轻松搞定。

    .

    参考测试页面 https://jsbin.com/yuqokidibo/edit?html,css,js,console,output

    展开全文
  • 拖拽属性

    2020-02-03 19:50:45
    是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或途松手(释放)的过程 拖拽 Drag 源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等 目标对象: 指定是我们拖动源对象后,预计要进入的区域 1....

    拖拽属性是H5的新特性:
    是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或半途松手(释放)的过程
    拖拽 Drag
    源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等
    目标对象: 指定是我们拖动源对象后,预计要进入的区域
    1. 被拖动的源对象可以触发的方法:
    1) ondragstart: 源对象开始被拖动
    2) ondrag: 被拖动过程中
    3) ondragend: 源对象被拖动结束
    2. 源对象进入目标对象可以触发的事件
    1) ondragenter: 源对象进入目标对象时触发
    2) ondragover: 源对象悬停在目标对象上方时触发
    3) ondragleave: 源对象被拖动着离开目标对象时触发
    4) ondrop: 源对象在目标对象上松手时 触发
    拖拽属性 一共就是这7个方法。 每一个都需要记忆
    event.dataTransfer: 数据传递对象
    功能: 用于在源对象和目标对象之间传递数据
    setData(): 设置数据 参数是 key 和 value(value必须是字符串)
    getData(): 获取数据,参数是key 。 通过key去获取对应的value值

    标签中自带的属性: draggable 是否可以拖拽, 默认值 false

            <div id="box" draggable="true">哈哈</div>
            <div id="two" draggable="true">嘻嘻</div>
        <script>
            var box = document.getElementById("box");
            var two = document.getElementById("two");
            //定义全局变量,存储鼠标的位置
            var offsetX;
            var offsetY;
            //开始拖动时
            box.ondragstart = function (ev) {
                //获取鼠标在元素上的位置
                offsetX = ev.offsetX;
                offsetY = ev.offsetY;
                ev.dataTransfer.setData("text",this.innerText);
                console.log(typeof this.innerText);
            }
            //源对象被拖动时
            box.ondrag = function (ev) {
                var x = ev.clientX;
                var y = ev.clientY;
                //drag事件最后一刻,无法读取鼠标的坐标, x 和 y 都会变成0
                if(x == 0 && y == 0){
                    return false; //直接结束,不赋值给元素
                }
                x -= offsetX;
                y -= offsetY;
                this.style.left = x + "px";
                this.style.top = y + "px";
            }
            //拖动结束时
            box.ondragend = function (ev) {
                // alert("拖完了");
            }
            //源对象进入目标对象时 触发
            two.ondragenter = function (ev) {
                two.style.backgroundColor = "yellow";
            }
            //从目标对象出去时 触发的方法
            two.ondragleave = function (ev) {
                two.style.backgroundColor = "red";
            }
            two.ondragover = function (ev) {
                //为了使ondrop方法生效,阻止默认事件
                // ev.stopPropagation();         阻止冒泡
                // 阻止默认事件的 方式1:
                ev.preventDefault();
                 //方式2
                 // return false;
            }
    

    在目标对象上松手时触发
    直接使用 ondrop方法的时候,是无法触发的,我们需要在ondragover中做一下处理

           two.ondrop = function (ev) {
                // this.innerHTML = "我被释放了·";
                // console.log("触发");
                this.innerHTML = ev.dataTransfer.getData("text");
            }
    

    使用JSON对象中的方法 转换 字符串和对象的数据类型

     var str = new String();
            var obj = {};
            //JSON.stringify(对象) : 可以将对象类型 转换为字符串类型
            // console.log(typeof JSON.stringify(obj));
            //JSON.parse(字符串) :  可以将字符串类型  转换为对象类型
            console.log(typeof JSON.parse(str));
    
    展开全文
  • String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> "> ...My J
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
    + request.getServerName() + ":" + request.getServerPort()
    + path + "/";
    %>


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->


    <base href="<%=basePath%>">


    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">


    <link href="css/bootstrap.min.css" rel="stylesheet">
    </head>


    <body>
    模态框
    <br>


    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg"
    data-toggle="modal" data-target="#myModal">
    Launch demo modal
    </button>
    <button type="button" id="mybtn">
    fdsf
    </button>
    <!-- Modal -->
    <div class="modal" id="myModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"
    aria-label="Close">
    <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">
    Modal title
    </h4>
    </div>
    <div class="modal-body">
    ...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">
    Close
    </button>
    <button type="button" class="btn btn-primary">
    Save changes
    </button>
    </div>
    </div>
    </div>
    </div>






    <div id="div1"
    style="border: 1px solid black; width: 200px; height: 100px;"></div>
    <input type="button" value="sss" id="btn1">










    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(function() {


    })


    var flg = "no";
    var x0 = 0;
    var y0 = 0;
    var x_down = 0;
    var y_down = 0;
    $("#mybtn").click(function() {
    $('#myModal').modal();
    });
    $(".modal-header").mousedown(function(e) {
    flg = "yes";
    x0 = e.pageX;
    y0 = e.pageY;
    x_down = $(".modal-dialog").offset().left;
    y_down = $(".modal-dialog").offset().top;
    $("#div1").html(flg + ";x0=" + x0 + ",y0=" + y0);
    $(".modal-content").css( {
    "opacity" : "0.6",
    });
    });
    $(".modal-header").mouseup(function(e) {
    flg = "no";
    $("#div1").html(flg);
    $(".modal-content").css( {
    "opacity" : "1",
    });
    });
    $(".modal-header").mousemove(function(e) {

    if (flg == "yes") {
    var x1 = e.pageX;
    var y1 = e.pageY;
    //$("#div1").html("move;x0="+x0+",y0="+y0+";x1="+x1+",y1="+y1+";x="+x+",y="+y);
    $(".modal-dialog").css( {
    "position" : "absolute",
    "left" : x1-x0+x_down + "px",
    "top" : y1-y0+y_down-27 + "px"
    });



    }


    });
    </script>
    </body>
    </html>
    展开全文
  • html5 拖拽

    2020-02-05 13:32:25
    拖拽属性是H5新特性:是指是指鼠标点击事件源后不松手,将其拖拽到目标对象或途松手(释 放)的过程 源对象:指的鼠标点击的一个事件,例如,一个图片,一个元素 目标对象:是指我们拖动源对象后,预计要进入的...
  • html5拖拽

    2020-02-06 19:09:08
    拖拽属性是H5新特性:是指是指鼠标点击事件源后不松手,将其拖拽到目标对象或途松手(释 放)的过程 源对象:指的鼠标点击的一个事件,例如,一个图片,一个元素 目标对象:是指我们拖动源对象后,预计要进入的...
  • 使用拖拽让页面渐变消失,背景不是透明,而是白色。 使用方法: <pre><code> let browser = JXPhotoBrowser.init() browser.pageIndex = pageIndex browser.numberOfItems = { ...
  • 模态框拖拽

    2020-05-02 19:59:51
        ...  要求 弹出框,我们也称为模态框。 ​1.点击弹出层,会弹出模态框, 并且显示灰色...鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动 ​4.鼠标松开,可以停止拖动模态框移动 思路 点击弹出...
  • 浅谈js拖拽

    2018-09-06 16:18:00
    本文来自网易云社区作者:刘凌阳前言本文依据半年前本人的分享《浅谈js拖拽》撰写,算是一篇迟到的文章。基本思路虽然现在关于拖拽的组件库到处都是,HTML5也把拖放纳入了标准。但考虑到兼容问题,我们还是从最古老...
  • 效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置透明和拖拽半透明的效果选项,可根据需要选择。另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,...
  • 效果说明:配合已有css样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置透明和拖拽半透明的效果选项,可根据需要选择。另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,...
  • 解决办法:清理一下鼠标下部激光感应的地方,还不行就得换一个试试了。
  • 例如,通过这些功能,用户可以使用鼠标选择可拖动元素,将元素拖动到可放置元素...对于网站、扩展以及 XUL 应用程序来说,你可以自定义能够成为可拖拽的元素类型、可拖拽元素产生的反馈类型,以及可放置的元素。ima...
  • 元素的拖拽属性drag

    2020-02-04 22:16:38
    拖拽属性(drag): 是指鼠标点击源对象后,不松手将其拖拽到目标对象或者途释放的过程(是H5的新属性) 源对象:指鼠标点击的内容 目标对象:指拖动源对象预计进入的区域 源对象可触发的事件: ondragstart 源...
  • 案例:模态框拖拽

    2020-10-05 11:09:07
    案例:模态框拖拽 功能需求: 点出弹出层,会弹出模块框,并且显示灰色透明的遮挡层 点击关闭按钮,可以关闭模态框,同时关闭灰色透明遮挡层 鼠标放到模态框最上面一层,可以按住鼠标拖拽模块框在页面中移动 ...
  • React+dva实现组件拖拽

    千次阅读 2018-08-29 11:27:01
    React+dva通过Resizable实现组件拖拽 1、通过npm install –save react-... defaultUpHeight保存的是拖拽停止时上部分组件的当前高度 defaultDownDownHeight保存的是拖拽停止时下部分组件的当前高度 ...
  • 其实HTML5就是新增一些有用的API让我们更轻松的开发从而把更多精力都放在业务逻辑...浏览器就会以透明复本的方式显示拖拽事件应该分为两类一类是被拖拽元素触发的事件另一类是拖放目标元素触发的事件拖拽元素的时候
  • 想实现拖拽时类似window自带拖拽的那种效果,被拖拽透明,焦点随着光标移动,鼠标左键抬起时,拖拽物被放置在焦点处,焦点处的内容被插入退后。 不知道哪位大神能帮帮忙
  • H5新特性 - 拖拽属性

    2020-04-13 01:34:32
    H5的新特性 : 是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或途松手(释放)的过程 拖拽 Drag 源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等 目标对象: 指定是我们拖动源对象后,预计要...
  • 移动端的div拖拽

    千次阅读 2017-03-02 14:17:17
    近期做H5时遇到让一个按钮可任意拖拽的需求,花了晚上搞定了,并写了个demo 和web端的mousemove等方法不同,移动端是touchstart、touchmove、touchend。 注意以下几点: 1.建议头部加上  详细移步:点击打开链接 ...
  • 效果说明:配合已有CSS样式,载入插件后,网页元素可以随意在窗口内拖拽,设置了原位置透明和拖拽半透明的效果选项,可根据需要选择。另外,当页面上有多个可拖拽元素时,可以载入另外一个用于设置z-index的插件,...
  • javaScript来实现拖拽页面滚动条

    千次阅读 2019-03-04 18:20:37
    但是这个是有限制,例如当前页面高度太长,默认是页上部分,你定位的元素在页尾,这个时候可能就会报元素不可见的异常。我们就需要利用javaScript来实现拖拽页面滚动条。 我们一般可以两个方法去拖拽,一个是根据...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 316
精华内容 126
关键字:

半拖拽