JS實現拖拽小案例

阿新 • • 發佈：2017-11-28

res pan urb posit htm eight || move use

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡單的拖拽</title>
    <link rel="stylesheet" href="../toolkit/reset.min.css">
    <style>
        #box{
            height: 200px;
            width: 200px;
            background-color 
: #e277ff;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>
<div id="box"></div>
<script>
    var box=document.getElementById("box");
    function drag(e) {
        e=e||window.event;
        var _this=this;
        var mouseX 
=e.clientX,
                mouseY=e.clientY,
                boxL=this.offsetLeft,
                boxT=this.offsetTop;
        document.onmousemove=function (e) {
            e=e||window.event;
            var curMouseX=e.clientX,
                    curMouseY=e.clientY,
                    curBoxL 
=curMouseX-mouseX+boxL,
                    curBoxT=curMouseY-mouseY+boxT;

            var minW=0,maxW=((document.documentElement.clientWidth||document.body.clientWidth)-_this.offsetWidth);
            var minH=0,maxH=((document.documentElement.clientHeight||document.body.clientHeight)-_this.offsetHeight);
            if(curBoxL<=minW){
                curBoxL=minW;
            }else if(curBoxL>=maxW){
                curBoxL=maxW
            }
            if(curBoxT<=minH){
                curBoxT=minH;
            }else if(curBoxT>=maxH){
                curBoxT=maxH;
            }

            _this.style.left=curBoxL+"px";
            _this.style.top=curBoxT+"px";
        };
        document.onmouseup=function () {
            document.onmousemove=null;
        }
    }
    box.onmousedown=drag;
</script>
</body>
</html>

JS實現拖拽小案例

res pan urb posit htm eight || move use <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

js 利用jquery.gridly.js實現拖拽並且排序

user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

js實現拖拽

無效鼠標 sed 添加知識方法 tar curl setw 拖拽效果在網站中是很常見的一種效果，其實現原理很簡單，不過其中也隱藏了不少關鍵知識點，比如說焦點丟失問題等。接下來看看具體代碼是怎麽實現的。 css樣式（註意：元素要定位，不然沒有效果） 1 .box {

原生js實現拖拽事件

ons window mov .get end ret htm 坐標 document <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

js實現拖拽相容pc端和手機端

pc端拖動時候用到的三個事件：mousedown、mousemove、mouseup 在移動端與之相對應的分別是：touchstart、touchmove、touchend事件。還有一點要注意的是在PC端獲取當前滑鼠的座標是：event.clientX和event.clientY，在移動

js實現拖拽文字到頁面，讀取文字內容到textarea

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .bo

js實現拖拽功能

<!doctype html> <html> <head> <meta charset="utf-8"> <title>拖拽功能&

js實現拖拽拉伸DIV右側邊框

頁面程式碼 <body> <div style="width: 100%; height: 100%;position: relative;"> <div id="nav" style="background-color: red; w

div/dom元素拖拽縮放外掛，純js實現拖拽縮放，不依賴jQuery~

產品需求，需要用到對div（dom）進行拖拽縮放操作，看到有好多外掛，要麼依賴jQuery，要麼檔案太大。封裝了一個外掛，不壓縮狀態下5KB。 html <!DOCTYPE html> <html lang="en"> <head> <

js實現拖拽的解析（3）

<div style="width: 100px;height: 100px;background-color: #2df2ff;position: absolute;;left: 0; top:

js實現拖拽外掛

二、JavaScript實現原理簡述在AS3中，使用startDrag()就能實現拖拽，但是js中，卻沒有此方法，但是也是可以實現的，說穿了，挺簡單的。實現拖拽方法不少，我呢，js功力尚淺，只知道一種實現原理。如下：①滑鼠按下+滑鼠移動 → 拖拽②滑鼠鬆開 → 無拖拽③滑鼠偏移 → 拖拽距離用JavaScri

php + js 實現拖拽上傳以及複製貼上上傳圖片

/**xeditor.js**/ xeditor_config = {basePath:'xeditor/' };//xeditor路徑 (function ($) {//阻止瀏覽器預設行。 $.fn.extend({ "setup": funct

JavaScript實現拖拽預覽，AJAX小文件上傳

strong 名稱獲取文件是否 set 可能 lis idt scrip 本地上傳，提前預覽（圖片。視頻） 1.html中div標簽預覽顯示。button標簽觸發上傳事件。 <div id="drop_area" style=

js 滑鼠拖拽效果實現

效果：原始碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>速表拖拽效果實現</title>

js 圖片拖拽效果實現

1、前端html排列 <div class="row" id="listing_extra_images" name="TophatterList[extra_images]"> <div class="image_item_content"

jQuery ui實現拖拽檔案到資料夾案例

js:/*拖動事件開始*/ var $gallery = $(".drop-move"), //拖動物件 $trash = $(".move-in"); //接收容器 $("dd",$gal

Vue 實現拖拽檔案到網頁進行檔案上傳【JS/JQ 原理也是一樣的】

效果: 拖入檔案前: 拖入檔案後: html: <div id="select_frame"> <div ref="select_frame" class=

實現拖拽上傳檔案的一款小控制元件——dropzone

因為專注所以專業。很多小巧的東西乍一看很不起眼，卻在特定的領域表現不俗，就是因為集中了熱情。 dropzone就是這樣一款小控制元件，實現拖拽上傳。它不依賴於其它像jquery等JS庫，而且支援多方面的定製。使用Dropzone所需要的準備工作很簡

簡單實現拖拽的方法 sortable.js

最近做BI專案頻繁用到拖拽，心累呀，後來發現了一款好用的拖拽外掛 sortable.js 真心好用，使用也特別方便,不依賴jq，可以在vue、ng、react中使用 <ul id="foo"> <li>老子天下第一</li> <

使用 vue 實現拖拽的簡單案例，不會超出可視區域

實現拖拽之前，先了解幾個小常識：這兩種獲取滑鼠座標的方法，區別在於基於的物件不同： pageX和pageY獲取的是滑鼠指標距離文件（HTML）的左上角距離，不會隨著滾動條滾動而改變； clientX和clientY獲取的是滑鼠指標距離可視視窗(不包括上面的位址列和滑動條)的距離

JS實現拖拽小案例

相關推薦