純J拖動案例

阿新 • • 發佈：2018-05-04

onmouseup nav on() size script rem emp register fff

技術分享圖片

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        .nav{
            height:30px;
            background: #036663;
            border-bottom:1px solid #369;
            line-height: 30px;
            padding 
-left:30px;
        }
        .nav a {
            color:#fff;
            text-align: center;
            font-size:14px;
            text-decoration: none;

        }
        .d-box{
            width:400px;
            height:300px;
            border:5px solid #eee;
            box-shadow:2px 2px 2px 2px #666;
            position: absolute;
            top: 
50%;
            left:50%;
            margin-top: -155px;
            margin-left:-205px;

        }
        .hd{
            width:100%;
            height:25px;
            background-color: #7c9299;
            border-bottom:1px solid #369;
            line-height: 25px;
            color:white;
            cursor: move;
        }
        #box_close{
             
float: right;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="nav">
    <a href="javascript:;" id="register">註冊信息</a>
</div>
<div class="d-box" id="d_box">
    <div class="hd" id="drop">註冊信息   (可以拖拽)
            <span id="box_close">【關閉】</span>
    </div>
    <div class="bd"></div>
</div>
</body>
</html>
<script>
    var box = document.getElementById("d_box");
    var drop = document.getElementById("drop");
    startDrop(drop,box);  // 鼠標放到  drop    但是移動 是 box
    function startDrop(current,move) {
        current.onmousedown = function(event) {
            var event = event || window.event;
            var x = event.clientX - move.offsetLeft - 205;   // 記錄當前盒子的x 位置
            var y = event.clientY - move.offsetTop - 155;  //  // 記錄當前盒子的y位置
            document.onmousemove = function(event) {
                var event = event || window.event;
                move.style.left = event.clientX - x + "px";
                move.style.top = event.clientY - y + "px";
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
            }

        }
        document.onmouseup = function() {  // 鼠標彈起之後， 鼠標繼續移動不應該操作
            document.onmousemove = null;
        }
    }

純J拖動案例

onmouseup nav on() size script rem emp register fff <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF

easyUI拖動購物車案例

fin $0 fff otto height cti borde rds 屬性 <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text

Js事件案例——實現div色塊拖動錄製

描述：實現一個div50*50的色塊，拖動它生成一個軌跡，鬆手後，這個div會重複你剛才拖動的這個路徑。效果：程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta

IOS圖片拖動 UIPanGestureRecognizer的使用案例

jquery封裝了一個簡潔輕巧的可拖動可自定義樣式的純div+css帶遮罩層的仿模態彈出框

最近封裝上癮，想起以前做的一個輕巧的彈出框，是樣式和指令碼分離的，於是重新封裝了一下，把樣式標籤統一到js裡了。裡面還有一些問題，但不影響使用，有興趣的同學，可以參考完善下，有好的建議，請不吝賜教。 if (typeof jQuery === 'unde

js：簡單的拖動效果

p s move ntb rec cti release 樣式 left eve 效果演示：https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="w

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

百度地圖拖動標註後獲取坐標

acc route wheel onclick 權限 ctype 在線 inpu initial 本來想用圖吧的API來做的，結果弄了下，在手機上弄不了。換用百度地圖了。。本功能個人覺得在很多地方用到，先記下來，省得每次都得翻地圖API文檔一點一點弄。功能表現為：

Android：圖片中疊加文字，支持拖動改變位置

ear nal format wrap trace ast 分享 gravity ica 之所以做了這麽一個Demo，是由於近期項目中有一個奇葩的需求：用戶拍攝照片後，分享到微信的同一時候加入備註，想獲取用戶在微信的彈出框輸入的內容。保存在自己的server上。而其實，

D3.js 使用縮放zoom時節點無法拖動，只能整體移動的問題

func blank on() sta blog function targe light event .on("dragstart", function() { d3.event.sourceEvent.stopPropagation();

dropzone拖動文件上傳在thinkphp5中應用一個實例

php dropzone參考：Dropzone的使用方法點擊查看dropzone中文文檔後臺用的INSPINIA框架的模板，裏面有，dropzone.jsdropzone是一個可以拖文件上傳的js.拖進去，就上傳了。我在頁面上，寫了一個保存已經上傳的文件的image3,image4.這就需要改寫一下dropz

iOS 自由拖動的滑塊

anim alt lan 技術分享代碼實現 per poi frame void 完全自由拖動的滑塊 floatViewExample 　　代碼實現： @implementation FloatView #pragma mark - lazyload - (U

直播疑難雜癥排查（9）— 拖動不準

拖動播放疑難雜癥直播 seek 本文為《直播疑難雜癥排查》系列的第九篇文章，我們重點看看播放視頻時拖動不準的問題。1. 問題現象播放過程中，拖動進度條後，實際播放的位置跟松開拖動時的位置相差很遠。2. 問題排查由於直播流是實時產生和傳輸的，是不能拖動的，因此該問題主要出現在 “點播

RecyclerView借助ItemTouchHelper實現拖動和滑動刪除功能

enable all istview aslist mar -- main erl pub RecyclerView是官方推薦代替ListView的空間，怎樣實現RecyclerView列表元素的拖動呢？官方提供了ItemTouchHelper類使用過程例如以下

Android 仿窗簾效果和登錄界面拖動效果（Scroller類的應用）附 2個DEMO及源代碼

@override 宋體 off down != 過程事件學習 border 在android學習中，動作交互是軟件中重要的一部分。當中的Scroller就是提供了拖動效果的類，在網上。比方說一些Launcher實現滑屏都能夠通過這個類去實現。以下要說的

wpf,後臺觸發按鈕點擊以及拖動

archive posit 多好自己 article fda continue width partial 觸發按鈕Click MouseButtonEventArgs args = new MouseButtonEventArg

EasyUI datagrid 列寬度拖動問題

datagrid grid ima 獲取 tag log mage 使用寬度問題:拖不動或者偶爾能拖動,拖動不按指定？原因:列寬度綁定的時候使用的百分比; 方法:獲取總寬度,經過百分比計算在綁定 EasyUI datagrid 列寬度拖動問題

鼠標的拖動實現物體的上下左右移動

sta button locale transform min atime enter ans 實現 private GameObject center; private float rotateSpeed = 40f; private float rot

仿播放器水平拖動

title box 父親 sed 水平 function lang margin [0 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l

Jquery實現可拖動進度條

div overflow 20px ext pan 點擊技術分享 img ani html 　　　　<div class="progress"> <div class="progress_bg">

純J拖動案例

相關推薦