国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

利用drag和drop實現列表自由拖拽和插入

hss01248 / 1235人閱讀

摘要：這方面的虧希望大家不要再吃首先我們要在開始移動時事件中創建一個新的，放在列表中，這個時候的只是一個占位符，只有當事件發生時，才能將真正的插入到列表中。

現在項目中需要實現一個自由拖拽插入的功能，類似于下面這樣

在網上找了一下發現沒有類似的功能，都不是利用drag和drop實現的，而本人強迫癥發作，必須用這兩個方法實現，現在做出了大概的功能：
首先，拿到這個需求的思路就是利用拖拽，拖拽事件中有三個值得一提的，ondrop，ondragstart，ondragover,這三個事件的意思分別是放置、開始移動、在...上移動，要弄懂這三個事件要在控制臺中打印出來，看他們分別有什么屬性； 在最開始，我因為一直想獲取鼠標的位置，而一直使用mousemove事件，后來發現其實上面的三個拖拽事件都是可以獲取鼠標位置的。。
這方面的虧希望大家不要再吃！
首先我們要在開始移動時ondragstart事件中創建一個新的div，放在列表中，這個時候的div只是一個占位符，只有當drop事件發生時，才能將真正的div插入到列表中。
在ondragover事件發生時，需要進行一系列計算，得出div應該插入的正確位置，這其中涉及鼠標位置、元素位置、頁面滾動距離，需要有一定的耐心，才能得出想要的結果，我屬于沒有耐心的。。
在ondrop事件發生時，我們需要刪除占位符div，插入真正div



    
        這是一個Demo
        
        
        
    
    
        

            
1

            
2

現在只是放上最雛形的代碼，待項目完善之后我會放出完善代碼以及頁面效果~

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89924.html

相關文章

  • 原生js封裝了一個插件集合(目前僅包含拖拽和創建自適應文本框插件，顏色選擇器)

    摘要：一個基于原生而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽支持移動端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創建自適應文本框。鄙人創建了一個群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼 ewplugins 一個基于原生js而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽（支持移動端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

    CatalpaFlat 評論0 收藏0

  • 原生js封裝了一個插件集合(目前僅包含拖拽和創建自適應文本框插件，顏色選擇器)

    摘要：一個基于原生而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽支持移動端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創建自適應文本框。鄙人創建了一個群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼 ewplugins 一個基于原生js而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽（支持移動端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

    fengxiuping 評論0 收藏0

  • 原生js封裝了一個插件集合(目前僅包含拖拽和創建自適應文本框插件，顏色選擇器)

    摘要：一個基于原生而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽支持移動端和端的插件，顏色選擇器插件其它插件正在逐步添加中。在線創建自適應文本框。鄙人創建了一個群，供大家學習交流，希望和大家合作愉快，互相幫助，交流學習，以下為群二維碼 ewplugins 一個基于原生js而封裝的插件集合，目前包含創建自適應的文本輸入框，拖拽（支持移動端和PC端）的插件，顏色選擇器插件,其它插件正在逐...

    cheng10 評論0 收藏0

發表評論

0條評論

hss01248

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<