成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

IE9+使用drag拖動更爽

ernest.wang / 1447人閱讀

摘要：在沒有事件的時候，做元素拖拽使用的都是事件，但在處理過程中可能有這樣或那樣的問題，主要還是感覺不流暢，如果小伙伴們不在考慮低版本的話，可以償試一下，會有意想不到的收獲。。

在沒有drag事件的時候，做元素拖拽使用的都是mouse事件，但mouse在處理過程中可能有這樣或那樣的問題，主要還是感覺不流暢，如果小伙伴們不在考慮低版本IE(

下面來展示下drap的主要事件

在拖動目標(biāo)上觸發(fā)事件 (源元素):

ondragstart - 用戶開始拖動元素時觸發(fā)

ondrag - 元素正在拖動時觸發(fā)

ondragend - 用戶完成元素拖動后觸發(fā)

釋放目標(biāo)時觸發(fā)的事件:

ondragenter - 當(dāng)被鼠標(biāo)拖動的對象進(jìn)入其容器范圍內(nèi)時觸發(fā)此事件

ondragover - 當(dāng)某被拖動的對象在另一對象容器范圍內(nèi)拖動時觸發(fā)此事件

ondragleave - 當(dāng)被鼠標(biāo)拖動的對象離開其容器范圍內(nèi)時觸發(fā)此事件

ondrop - 在一個拖動過程中，釋放鼠標(biāo)鍵時觸發(fā)此事件

dataTransfer對象(了解就行了)：

dropEffect 設(shè)置放下效果（copy move link none）

effectAllowed 允許的效果 (copy move link copyLink copyMove linkMove all
none uninitialized(默認(rèn)值，等同于all))

files FileList對象

setDragImage()

setData()

getData()

clearData()

演示效果

HTML:


    
    
        
  • 標(biāo)題一
    • 
        
  • 標(biāo)題二
    • 
        
  • 標(biāo)題三
    • 
        
  • 標(biāo)題四
    • 
        
  • 標(biāo)題五
    •

JS:

在dragover和drop環(huán)節(jié)上阻止默認(rèn)事件(e.preventDefault())是少不了的，，不信的少俠可以嘗試一下，以來印證老夫所言非虛。。。哈哈哈，偏偏然，隱身山林中……

控制臺打印

示例

完整代碼




    
    拖動
    
    


    
    
    
    
        
  • 
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
        
  • 6
    • 
        
  • 7
    • 
        
  • 8
    • 
        
  • 9
    •

最后向大家推薦一個拖動插件 http://dragsort.codeplex.com/ 用過感覺還不錯

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80722.html

相關(guān)文章

  • 使用 Drag and Drop 給Web應(yīng)用提升交互體驗

    摘要：注意點在鼠標(biāo)操作拖放期間，有一些事件可能觸發(fā)多次，比如和?？赏献г?，建議使用，設(shè)定可拖拽元素的鼠標(biāo)游標(biāo)，提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop （拖放）？ 簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標(biāo)選中一個可拖動元素，移動鼠標(biāo)拖放到一個可放置到元素的過程。 我相信每個人都或多或少接觸過拖放，比如瀏覽...

    legendmohe 評論0 收藏0

  • 拖放排序插件Sortable.js

    摘要：介紹是一款輕量級的拖放排序列表的插件雖然體積小，但是功能很強(qiáng)大下載地址官方特點支持觸屏設(shè)備和大部分瀏覽器以下的就不支持了，原因都懂得可以從一個列表容器中拖拽一個列表單元到其他容器或本列表容器中進(jìn)行排序移動列表單元時有動畫支持拖放操作和可選擇 介紹 Sortable.js是一款輕量級的拖放排序列表的js插件（雖然體積小，但是功能很強(qiáng)大）下載地址：https://github.com/Ru...

    tomorrowwu 評論0 收藏0

  • 拖動中的味道

    摘要：內(nèi)容不可被拖動。指定一個元素拖動發(fā)生時顯示在光標(biāo)下方，三個參數(shù)分別是要顯示的元素和光標(biāo)在顯示元素中的坐標(biāo)。返回被拖放文件的對象。返回事件中傳遞的數(shù)據(jù)類型的類似數(shù)組的集合。 拖~ 在js里面關(guān)于拖這個概念是完全沒有的(except h5). 以前只能造一大堆的輪子，比如使用mousedown + mousemove + mouseup. 這3個事件結(jié)合起來實現(xiàn)復(fù)雜的UI操作。 現(xiàn)在，h5...

    468122151 評論0 收藏0

發(fā)表評論

0條評論

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