JS拖拽组件开发

最新推荐文章于 2024-05-14 17:29:11 发布
最新推荐文章于 2024-05-14 17:29:11 发布
阅读量892 收藏
点赞数
分类专栏： javascript 文章标签： javascript
http://blog.csdn.net/liuyan19891230/article/details/50195867?ref=myread
  分类：

版权声明：本文为博主原创文章，未经博主允许不得转载。

JS代码需要常写，不然容易生疏，最近虽然一直在看JS的原型，行为委托等知识点，但是动手写代码的量略有减少。周末在家，写了一个拖拽组件，与大家分享。

首先，看一下拖拽的原理。 
这里写图片描述 
被拖拽元素位置的变化，left值的变化其实就是鼠标位置水平方向的变化值，e.clientX - 鼠标左键按下时e.clientX。 
top值的变化其实就是鼠标位置竖直方向的变化值，e.clientY - 鼠标左键按下时e.clientY。 
另外就是设置拖拽的范围，上下左右不得超过父元素所在的区域。

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    function Drag (config){
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span> = document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(config<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.id</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            if(config<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parentId</span>){
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.targetParent</span> = document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(config<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.parentId</span>)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_left = this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.targetParent</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientWidth</span> - this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_top = this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.targetParent</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientHeight</span> - this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetHeight</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            }else{
                console<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.log</span>(document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.documentElement</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientHeight</span> + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"||"</span> + this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetHeight</span>)
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_left = document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.documentElement</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientWidth</span> - this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span> - 
                    parseInt(this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getStyle</span>(document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"border-width"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_top = document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.documentElement</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientHeight</span> - this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetHeight</span>- 
                    parseInt(this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getStyle</span>(document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"border-width"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            }            
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lock</span> = true<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        }
        Drag<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.prototype</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getStyle</span> = function(element, attr){
            if(element<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.currentStyle</span>){
                return element<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.currentStyle</span>[attr]<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            }else{
                return window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getComputedStyle</span>(element,null)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getPropertyValue</span>(attr)
            }
        }
        Drag<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.prototype</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moDown</span> = function(e){
            e = e || window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.event</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientX</span> = e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientX</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientY</span> = e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientY</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            //鼠标按下时，drag的left值，top值(写在style中或者是css中)
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startLeft</span> = parseInt(this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.left</span> || this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getStyle</span>(this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"left"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startTop</span> = parseInt(this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.top</span> || this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getStyle</span>(this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"top"</span>))<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            //鼠标按下时，鼠标的clientX值，clientY值
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startClientX</span> = e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientX</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startClientY</span> = e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientY</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lock</span> = false<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        }<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        Drag<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.prototype</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moMove</span> = function(e){
            e = e || window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.event</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            if(e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.which</span> != <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>){
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lock</span> = true<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            }
            if(!this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lock</span>){
                var realLeft = this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startLeft</span> + e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientX</span> - this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startClientX</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//实际的移动范围</span>
                var realTop = this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startTop</span> + e<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientY</span> - this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startClientY</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                    //rightLeft , rightTop<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">; //left, top 取值(在可移动范围内)</span>
                var rightLeft = realLeft > this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_left ? this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_left : ( realLeft > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> ? realLeft : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> )<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                var rightTop = realTop > this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_top ? this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.max</span>_top : ( realTop > <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> ? realTop : <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> )<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.left</span> = rightLeft + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"px"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
                this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.top</span> = rightTop + <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"px"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            }
        }<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        Drag<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.prototype</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moUp</span> = function(e){
            e = e || window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.event</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.lock</span> = true<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        }<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        Drag<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.prototype</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.startDrag</span> = function(){
            console<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.log</span>(this)
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.onmousedown</span> = function(e){this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moDown</span>(e)}<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.bind</span>(this)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.onmousemove</span> = function(e){this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moMove</span>(e)}<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.bind</span>(this)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
            this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moveTarget</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.onmouseup</span> = function(e){this<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.moUp</span>(e)}<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.bind</span>(this)<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
        }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li></ul>

说明：moDown响应鼠标左键按下操作，moMove响应鼠标移动操作，MoUp响应鼠标抬起操作。

在moMove中增加了e.which判断，e.which ==1 表示鼠标左键按下，这是为了解决，鼠标移除可拖拽范围外，再移回时，无需按下左键，被拖拽元素就会跟着动的Bug。

使用说明：

在使用时，被拖拽元素的id是必须参数，父元素的id(即可以拖拽移动的范围)为可选参数，如果不传递父元素的id，则默认使用documentElement为可拖拽的范围。

如果传递父元素，请别忘了将父元素的定位设为position:relative或position:absolute。

在使用时，先引入拖拽插件的js文件。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!doctype html></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">lang</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"en"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">charset</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"UTF-8"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Generator"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"EditPlus®"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Author"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"刘艳"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Keywords"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"关键字"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">name</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Description"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"描述"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>Document<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">title</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span><span class="css" style="box-sizing: border-box;">
            *<span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">padding</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span>px</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-id" style="box-sizing: border-box; color: rgb(155, 112, 63);">#content</span><span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">600</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">500</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">relative</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">5</span>px solid green</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
            <span class="hljs-id" style="box-sizing: border-box; color: rgb(155, 112, 63);">#drag</span><span class="hljs-rules" style="box-sizing: border-box;">{
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">position</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">absolute</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">100</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">top</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">50</span>px</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">left</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span>px</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">background</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">pink</span></span>;
                <span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">cursor</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">pointer</span></span>;
            <span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        </span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span> = "<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>"></span>
            <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span> = "<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">drag</span>" ></span>
            <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>  
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span> = "<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">url</span>/<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">drag.js</span>"></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span><span class="javascript" style="box-sizing: border-box;">
    window.onload = <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> drag = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> Drag({id: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"drag"</span>, parentId: <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"content"</span>});
        drag.startDrag();

    }

</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li></ul>

如果您想在整个窗口中拖拽，请不要设置被拖拽元素的父元素的定位，即，使其相对body定位。

如果您需要对body定位，但是又需要设置其父元素的position为非static，那么您可以对本插件进行扩展。

希望本文对您JS的学习能有所帮助。

zdy0_2004
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
强大的js拖动控件
07-13
NULL 博文链接：https://satanultra.iteye.com/blog/748063
js实现拖拽编辑控件
04-20
依赖第三方控件实现js拖动编辑效果 伪input实现多行输入效果 sortable.js 原生js实现demo 纯第三方控件demo  实现思路： （1）点击基本设置拖动后如何改变拖动的内容 （2）如何关联拖动后的内容 与 选项设置关联 （3）textarea伪装成input支持多行输入
2024年最全可视化拖拽组件库一些技术要点原理分析(1)，2024年最新阿里巴巴p6面试
最新发布
2401_84418883的博客
05-14 676
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Draggable - 拖放插件
coderidea
10-31 294
     1） SpryMap一个超级轻量级的依赖于 JavaScript 的小组件，能够让 HTML 元素实现类似 Google Maps 中的点击和拖拽效果。 主页: http://candrews.net/blog/2010/10/introducing-sprymap/ 演示地址: http://candrews.net/sandbox/spryMap...
【JS组件篇】使用拖拽组件 react-beautiful-dnd 实现工作台自定义布局功能
章魚尐芄子的博客
11-09 1903
基于 react-beautiful-dnd 组件 制作工作台页面：模块可根据后端配置动态展示，各模块可根据个人喜好进行拖拽布局，并保存。
Draggable打造跨平台的轻量级原生JS拖拽组件库
08-12
自己写的一个拖拽库，基于原生JS实现，无任何依赖，同时还做了IE8的兼容，在IE8的情况下transform回退到position实现。拖拽的动画通过绑定在render函数上的requestAnimationFrame实现而不是使用mousemove回调。
Vue拖拽组件开发实例详解
12-01
Vue.js 是一款流行的前端JavaScript框架，它以轻量级、高效的数据绑定和灵活的组件系统著称。在选择Vue作为开发工具时，我们主要考虑到它使用虚拟DOM技术，这一特性使得Vue在处理DOM更新时更加高效，减少了不必要的...
基于layui2.7RC5 Sortable拖拽组件开发的一款简洁易用，功能强大的表单设计器
03-25
基于layui Sortable拖拽组件完成的表单设计器，其中包含layui表单自有的大部分组件，包含第三方级联选择器、tags标签，在布局方面支持TAB选项卡，GRID栅格布局，代码通俗易懂，开箱即用
vue开发拖拽进度条滑动组件
10-16
在 Vue 中开发拖拽进度条滑动组件，可以帮助我们创建交互式的用户界面，让用户能够通过拖动滑块改变进度或选择值。下面将详细介绍如何使用 Vue 开发这样的组件。 首先，我们要创建一个名为 `Slider` 的组件。这个...
Drag:javascript拖动组件
07-06
"Drag:javascript拖动组件"是一个关于如何使用JavaScript实现拖放功能的专题，主要关注如何创建一个可拖动的组件。下面将详细介绍这个主题及其相关知识点。 首先，`Drag`看起来是一个自定义的JavaScript类或者函数...
JS拖拽组件学习使用
10-22
主要为大家介绍了JS拖拽组件的开发过程，以及如何正确使用JS拖拽组件，做到举一反三，感兴趣的小伙伴们可以参考一下
支持拖拽的js甘特图组件
05-30
源自开源的甘特图组件jquery gantt，加上了拖拽和resize功能，enjoy！
前端拖拉js
10-10
前端拖拉控件，包含demo，支持ie8及以上版本，谷歌，火狐等浏览器
flex组件拖拽框架
04-16
一个flex组件拖拽框架的例子，有实例，有源码，希望对你有帮助
js实现控件拖拽
sjiang2142的专栏
08-09 3698
Rays Drag Test function DragObj() { var flag=0;//0:no,1:yes var x=0; var y=0; } var dEvt = new DragObj(); function down(obj)
javascript 实现拖拽组件
weixin_44456354的博客
12-30 503
js部分 // Function.prototype 实现 function Drag(dom) { this.dom = document.getElementById(dom); this.disX = 0; this.disY = 0; } Drag.prototype.init = function () { this.bindEvent(); } Drag.prototype.bindEvent = function() { this.m
JS 实现控件拖拽/拖动
aphy358的博客
11-24 9100
下面是实现控件拖拽的完整代码，只实现了拖拽，边界控制没做，可以自行添加。 (function ($) {     var move = false;             //标记控件是否处于被拖动状态     var dragOffsetX = 0;        //控件左边界和鼠标X轴的差     var dragOffsetY = 0;        //控件上边界和鼠标
js 拖拽组件sortablejs的简单使用
PrimaryColor
12-17 708
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box
【JS组件库】拖拽排序组件
KatyLight的博客
01-24 645
使用原生的drageable字段以及ondrag和ondrop的效果导致的透明看不清楚无法捕获位置。写的模拟方法可以解决上述问题。竖向排列依然可以替换。
D3.js实现拖拽组件生成拓扑图
07-28
D3.js是一个用于数据可视化的JavaScript库，可以帮助我们将数据转化为美观的图形。在这个引用中，作者使用了D3.js的hierarchy和tree模块来生成拓扑数据结构，并使用了linkHorizontal模块来生成水平连接线。同时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值