使用滑鼠拖拽div，實現橫向滾動

阿新 • • 發佈：2019-02-19

效果
效果示例

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    </head>  

    <body 
>  

        <div id="pic" style="width:10000px;height:300px;font-size:100px;">
getY和getX同樣道理，這兩個差值就是滑鼠相對於物件的定位，因為拖拽後滑鼠和拖拽物件的相對位置是不變的
        </div>
        <script type="text/javascript">  
            var drag=function(obj){  

                obj.bind("mousedown",start);  

                function 
 start(event){  
                    if(event.button==0){//判斷是否點選滑鼠左鍵  
                        gapX=event.clientX;
                        startx = $(window).scrollLeft();  // scroll的初始位置

                        //movemove事件必須繫結到$(document)上，滑鼠移動是在整個螢幕上的  
                        $(document).bind("mousemove" 
,move);  
                        //此處的$(document)可以改為obj  
                        $(document).bind("mouseup",stop);                           
                    }  
                    return false;//阻止預設事件或冒泡  
                }  
                function move(event){  
                    var left = event.clientX-gapX; // 滑鼠移動的相對距離

                    $(window).scrollLeft(startx - left );

                    return false;//阻止預設事件或冒泡  
                }  
                function stop(){  
                    //解繫結，這一步很必要，前面有解釋  
                    $(document).unbind("mousemove",move);  
                    $(document).unbind("mouseup",stop);  
                }  
            }  
            obj=$("#pic");  
            drag(obj);//傳入的必須是jQuery物件，否則不能呼叫jQuery的自定義函式  
        </script>  
    </body>  
</html>

使用滑鼠拖拽div，實現橫向滾動

效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

JavaScript 在vue頁面下實現滑鼠拖拽div改變其大小，適用於鷹眼地圖，街景地圖等。

首先看效果，如圖，滑鼠懸浮在地圖的右上角小框中時，提示“拖動調整大小”，可以給小框加個好看的圖示。點選可以進行拖拽。基於上一篇部落格：https://blog.csdn.net/acoolgiser/article/details/84866426 實現。程式碼：

DOM事件 --滑鼠拖拽div

實現效果：分析： 1.當滑鼠在粉色div上按下時，捕獲onmousedown事件，獲取滑鼠的座標clientX,clientY 2.滑鼠在按下後移動，整個div跟隨著移動，獲取滑鼠按下時相對於整個div的座標，即下圖中的disx,dixy 3.滑鼠擡起後，整個

JavaScript 滑鼠拖拽div 改變其大小

轉自： http://www.cnblogs.com/yushang/archive/2013/03/19/2968782.html 想讓div實現拖拽改變大小功能，類似於soso地圖（即現在的騰訊地圖）的看街景時地圖可以拖拽等功能分析一下，實現這個功能需要：滑鼠按下，滑鼠

div如何實現橫向滾動

實現多個div在容器內橫向排列，利用white-space這個屬性防止父容器內容換行，同時將容器內元素設定為行內塊 display：inline-block來實現。實現程式碼： <div style=

js 滑鼠拖拽效果實現

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

Jquery實現拖拽div巢狀的iframe不卡頓

css * {padding: 0;margin: 0;box-sizing: border-box;} .main {width: 1000px;height: 700px;position: absolute;left: 50%;top: 50%;margi

滑鼠事件點選拖拽div

<div id="div1"></div> #div1{ width:100px; height: 100px; background:red; position: absolute; } window.onload = function() { var

js原生程式碼實現滑鼠拖拽(超簡單)

首先先來看這一張圖在這種圖中，盒子的大小為512px，並且margin-left:-250px margin-top:140px;並通過一些樣式讓其在中部顯示這些樣式都不是重要的，這裡加個margin是為了讓其出現拖拽的時候出現滑鼠偏移，好做演示而已，不然margin：0 auto 就可以實現盒子

VUE自定義指令實現滑鼠拖拽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>練習：自定義指令實現元素的拖拽</title> <script src="

javascript--滑鼠拖拽視窗案例（滑鼠按下，在滑鼠移動過程中，盒子跟著一起移動，滑鼠鬆開，盒子停止移動）

介面如圖所示：要求：在“資訊註冊”欄，按下滑鼠，然後滑鼠在頁面移動，在滑鼠移動過程中，該視窗跟著滑鼠移動，當滑鼠鬆開的時候，視窗停止移動。點選“關閉”，該視窗隱藏。實現思路： 1.頁面結構分析：一個大盒子d-box來確定位置，裡面放一個小盒子drop（存放“註冊資訊（可以拖拽”文字和span標籤

Unity3d 實現用滑鼠拖拽滑鼠

實現用滑鼠拖拽滑鼠滑鼠進入物體改變物體顏色 using UnityEngine; using System.Collections; public class clickObj : MonoBehaviour { public Texture2D[] pic =

Unity—實現滑鼠拖拽

滑鼠拖拽好像只能用於UI物件，暫時好像是這樣的，如有誤，我後面會更新。一：NGUI實現 NGUI的更簡單，只需直接覆寫OnDragRelease()方法//拖拽結束時呼叫 protected override void OnDragDropRelease(GameObj

組裝原有控制元件實現橫向滾動的時間選擇器，可滑動點選，初始狀態在指定位置

簡介前段時間，產品設計了一個橫向的滾動的時間選擇器，由於工作很急，也沒時間來自定義view，而且目前開發的專案很老了，不支援V7的包，所以我不能用recyclerview。我就將就之前的GridView和HorizontalScrollView,組裝了一哈就可以了。本

js實現滑鼠拖拽功能基本思路

如果要設定物體拖拽，那麼必須使用三個事件，並且這三個事件的使用順序不能顛倒。 onmousedown：滑鼠按下事件onmousemove：滑鼠移動事件onmouseup：滑鼠擡起事件拖拽的基本原理就是根據滑鼠的移動來移動被拖拽的元素。滑鼠的移動也就是x、y座

如何拖拽DIV邊線並左右自適應改變大小？

table row tle urn || bsp prop posit repl //樹圖拉伸 jQuery(function ($){ var doc = $(document), dl = $(".side-tree"), dc

拖拽窗體的實現

sys system int als sep use void sem sender 之前做的項目，趁機總結一下新學到的技能 C#拖拽窗體的實現首先設置FormBorderStyle為none，設置topmost為true（顯示為最頂層窗體）。接下來，主要是三個鼠標事件的

Android 自定義可拖拽View，界面渲染刷新後不會自動回到起始位置

AD att starty attrs floating blog body .get dmi 以自定義ImageView為例： /** * 可拖拽ImageView * Created by admin on 2017/2/21. */ public class

移動端h5下ul實現橫向滾動css代碼

html style idt htm float overflow inline css AD html代碼： 1 <ul id="category"> 2 <li>品牌團</li> 3 <li>美體個護&l

矩形拖拽移動，四個角拖動改變大小

http enter pos 變化 tails per posit ems sca 原創是https://blog.csdn.net/liujava621/article/details/30495103，我這裏做了修改，侵權刪。上幹貨：這裏首先要註意操作四個角的時候，框

使用滑鼠拖拽div，實現橫向滾動

相關推薦