2023年6月20日发(作者：)
HTML元素拖拽功能实现的完整实例⽬录1 需要了解的知识点 1.1 offset（偏移量）1.2 client（客户区）1.3 scroll（滚动区域）1.4 window（窗⼝）1.5 ⿏标事件对象（mouseEvent）的⼀些属性2 ⽰例演⽰ 2.1 元素⽔平拖拽效果实现2.2 元素垂直拖拽效果实现2.3 元素任意⽅向拖拽效果实现3 参考⽂献1 需要了解的知识点 1.1 offset（偏移量）定义：元素在屏幕上占⽤的所有的可见的空间。元素可见的⼤⼩由其⾼度、宽度决定，包括所有内边距、滚动条和边框⼤⼩四个属性offsetHeight：元素正在垂直⽅向上占⽤的⼤⼩空间，单位为px，不包括margin值。只读属性。offsetWidth：元素在⽔平⽅向上占⽤的⼤⼩空间，单位为px，不包括margin值。只读属性。offsetLeft：元素的左外边框⾄包含元素的左内边框之间的距离，单位为px。只读属性。offsetTop：元素的上外边框⾄包含元素的上内边框之间的像素距离，单位为px。只读属性。offsetParent：是⼀个元素最近的并且是定位过(relative || absolute)的⽗元素，如果没有⽗元素或者是⽗元素中没有⼀个是定位过的，返回值就是body元素。只读属性。Left和Top取值问题，分多种情况：如果element是body的直接⼦元素，返回值则是element距离body左侧或顶部的距离；如果element不是body的直接⼦元素，在⽗元素进⾏定位(relative或absolute)的情况下，各浏览器返回值都是element距离⽗元素左侧或者是顶部的距离（唯⼀的区别就是chrome没有把边框计算进去，IE、firefox都计算进去了）；如果element不是body的直接⼦元素，⽗元素也没有进⾏定位的情况下，各浏览器返回的直接是element元素距body的距离。从上⾯可以看出offsetLeft、offsetTop返回的值就是element到offsetParent的距离，这个offsetParent是什么元素要看ele的⽗元素有没有进⾏定位（relative、absolute）。1.2 client（客户区）定义：元素的客户区⼤⼩（client dimension）指的是元素内容及其内边距所占距的空间⼤⼩。clientWidth：元素内容区宽度 + 左右内边距宽度，单位为px。内联元素以及没有 CSS 样式的元素的clientWidth属性值为 0。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。只读属性。clientHeight：元素内容区⾼度 + 上下内边距⾼度，单位为px。内联元素以及没有 CSS 样式的元素的clientHight属性值为 0。该属性包括内边距，但不包括⽔平滚动条（如果有）、边框和外边距。只读属性。clientLeft：表⽰⼀个元素的左边框的宽度，单位为px。如果元素在左侧（右侧滚动条不算）有垂直滚动条，则该属性包括滚动条的宽度。clientLeft不包括左外边距和左内边距。只读属性。clientTop：表⽰⼀个元素的上边框的宽度，单位为px。如果元素在顶部（底部滚动条不算）有⽔平滚动条，则该属性包括滚动条的宽度。clientTop不包括上外边距和上内边距。只读属性。1.3 scroll（滚动区域）我们⼀般看到的默认滚动条的宽度是17px。滚动⼤⼩：指的是包含滚动内容的元素的⼤⼩。scrollHeight: 在没有滚动条的情况下，元素内容的总⾼度，单位为px。该尺⼨包括元素的padding，但不包括元素的border、margin和⽔平滚动条宽度（如果存在）。scrollWidth：在没有滚动条的情况下，元素内容的总宽度，单位为px。该尺⼨包括元素的padding，但不包括元素的border、margin和垂直滚动条的宽度（如果存在）。scrollLeft：被隐藏在内容区域左侧的像素值，通俗的解释就是元素⽔平滚动条到元素左边的距离。通过设置这个属性值可以改变元素的滚动位置。scrollTop：被隐藏在内容区域上⽅的像素值，通俗的解释就是元素垂直滚动条到元素上⽅的距离。通过设置这个属性值可以改变元素的滚动位置。1.4 window（窗⼝）eight：返回窗⼝的⽂档显⽰区的⾼度。idth：返回窗⼝的⽂档显⽰区的宽度。idth和eight属性获取加上⼯具条与滚动条窗⼝的宽度与⾼度。在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗⼝本⾝的尺⼨（⽆论是从最外层的window对象还是从某个框架访问）。在Opera中，这两个属性的值表⽰页⾯视图容器的⼤⼩。⽽innerWidth和innerHeight则表⽰该容器中页⾯视图区的⼤⼩（减去边框宽度）。在Chrome中，eight与innerWidth，innerHeight返回相同的值，即视⼝(viewport)⼤⼩⽽⾮浏览器窗⼝⼤⼩。IE没有提供取得当前浏览器窗⼝尺⼨的属性。不过，它通过DOM提供了页⾯可见区域的相关信息。在IE以及Firefox、Safari、Opera和Chrome中，Width和Height中保存了页⾯视⼝的信息。在IE6中，这些属性必须在标准模式下才有效。如果是混杂模式，就必须通过Width和Height取得相同信息。⽽对于混杂模式下的Chrome，则⽆论通过ntElement还是中的clientWidth和clientHeight属性，都可以取得视⼝的⼤⼩。1.5 ⿏标事件对象（mouseEvent）的⼀些属性X：返回⿏标触点相对于浏览器可见视区(或有效区域)左边沿的的X坐标，不包括任何滚动偏移，单位为px。这个值会根据⽤户对可见视区的缩放⾏为⽽发⽣变化。Y：返回⿏标触点相对于浏览器可见视区(或有效区域)上边沿的的Y坐标，不包括任何滚动偏移，单位为px。这个值会根据⽤户对可见视区的缩放⾏为⽽发⽣变化。：⿏标触点相对于HTML⽂档左边沿的的X坐标，单位为px。和clientX 属性不同，这个值是相对于整个html⽂档的坐标，和⽤户滚动位置⽆关。因此当存在⽔平滚动的偏移时，这个值包含了⽔平滚动的偏移。：⿏标触点相对于HTML⽂档上边沿的的Y坐标，单位为px。和clientY 属性不同，这个值是相对于整个html⽂档的坐标，和⽤户滚动位置⽆关。因此当存在垂直滚动的偏移时，这个值包含了垂直滚动的偏移。X：返回⿏标触点相对于屏幕左边沿的X坐标，单位为px。不包含页⾯滚动的偏移量。Y：返回⿏标触点相对于屏幕上边沿的Y坐标，单位为px。不包含页⾯滚动的偏移量。X：当⿏标事件发⽣时，⿏标触点距离事件源元素左侧的X轴⽅向上的距离，单位为px。Y：当⿏标事件发⽣时，⿏标触点距离事件源元素顶部的Y轴⽅向上的距离，单位为px。2 ⽰例演⽰ 2.1 元素⽔平拖拽效果实现
2023年6月20日发(作者：)
HTML元素拖拽功能实现的完整实例⽬录1 需要了解的知识点 1.1 offset（偏移量）1.2 client（客户区）1.3 scroll（滚动区域）1.4 window（窗⼝）1.5 ⿏标事件对象（mouseEvent）的⼀些属性2 ⽰例演⽰ 2.1 元素⽔平拖拽效果实现2.2 元素垂直拖拽效果实现2.3 元素任意⽅向拖拽效果实现3 参考⽂献1 需要了解的知识点 1.1 offset（偏移量）定义：元素在屏幕上占⽤的所有的可见的空间。元素可见的⼤⼩由其⾼度、宽度决定，包括所有内边距、滚动条和边框⼤⼩四个属性offsetHeight：元素正在垂直⽅向上占⽤的⼤⼩空间，单位为px，不包括margin值。只读属性。offsetWidth：元素在⽔平⽅向上占⽤的⼤⼩空间，单位为px，不包括margin值。只读属性。offsetLeft：元素的左外边框⾄包含元素的左内边框之间的距离，单位为px。只读属性。offsetTop：元素的上外边框⾄包含元素的上内边框之间的像素距离，单位为px。只读属性。offsetParent：是⼀个元素最近的并且是定位过(relative || absolute)的⽗元素，如果没有⽗元素或者是⽗元素中没有⼀个是定位过的，返回值就是body元素。只读属性。Left和Top取值问题，分多种情况：如果element是body的直接⼦元素，返回值则是element距离body左侧或顶部的距离；如果element不是body的直接⼦元素，在⽗元素进⾏定位(relative或absolute)的情况下，各浏览器返回值都是element距离⽗元素左侧或者是顶部的距离（唯⼀的区别就是chrome没有把边框计算进去，IE、firefox都计算进去了）；如果element不是body的直接⼦元素，⽗元素也没有进⾏定位的情况下，各浏览器返回的直接是element元素距body的距离。从上⾯可以看出offsetLeft、offsetTop返回的值就是element到offsetParent的距离，这个offsetParent是什么元素要看ele的⽗元素有没有进⾏定位（relative、absolute）。1.2 client（客户区）定义：元素的客户区⼤⼩（client dimension）指的是元素内容及其内边距所占距的空间⼤⼩。clientWidth：元素内容区宽度 + 左右内边距宽度，单位为px。内联元素以及没有 CSS 样式的元素的clientWidth属性值为 0。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。只读属性。clientHeight：元素内容区⾼度 + 上下内边距⾼度，单位为px。内联元素以及没有 CSS 样式的元素的clientHight属性值为 0。该属性包括内边距，但不包括⽔平滚动条（如果有）、边框和外边距。只读属性。clientLeft：表⽰⼀个元素的左边框的宽度，单位为px。如果元素在左侧（右侧滚动条不算）有垂直滚动条，则该属性包括滚动条的宽度。clientLeft不包括左外边距和左内边距。只读属性。clientTop：表⽰⼀个元素的上边框的宽度，单位为px。如果元素在顶部（底部滚动条不算）有⽔平滚动条，则该属性包括滚动条的宽度。clientTop不包括上外边距和上内边距。只读属性。1.3 scroll（滚动区域）我们⼀般看到的默认滚动条的宽度是17px。滚动⼤⼩：指的是包含滚动内容的元素的⼤⼩。scrollHeight: 在没有滚动条的情况下，元素内容的总⾼度，单位为px。该尺⼨包括元素的padding，但不包括元素的border、margin和⽔平滚动条宽度（如果存在）。scrollWidth：在没有滚动条的情况下，元素内容的总宽度，单位为px。该尺⼨包括元素的padding，但不包括元素的border、margin和垂直滚动条的宽度（如果存在）。scrollLeft：被隐藏在内容区域左侧的像素值，通俗的解释就是元素⽔平滚动条到元素左边的距离。通过设置这个属性值可以改变元素的滚动位置。scrollTop：被隐藏在内容区域上⽅的像素值，通俗的解释就是元素垂直滚动条到元素上⽅的距离。通过设置这个属性值可以改变元素的滚动位置。1.4 window（窗⼝）eight：返回窗⼝的⽂档显⽰区的⾼度。idth：返回窗⼝的⽂档显⽰区的宽度。idth和eight属性获取加上⼯具条与滚动条窗⼝的宽度与⾼度。在Safari和Firefox中，outerWidth和outerHeight返回浏览器窗⼝本⾝的尺⼨（⽆论是从最外层的window对象还是从某个框架访问）。在Opera中，这两个属性的值表⽰页⾯视图容器的⼤⼩。⽽innerWidth和innerHeight则表⽰该容器中页⾯视图区的⼤⼩（减去边框宽度）。在Chrome中，eight与innerWidth，innerHeight返回相同的值，即视⼝(viewport)⼤⼩⽽⾮浏览器窗⼝⼤⼩。IE没有提供取得当前浏览器窗⼝尺⼨的属性。不过，它通过DOM提供了页⾯可见区域的相关信息。在IE以及Firefox、Safari、Opera和Chrome中，Width和Height中保存了页⾯视⼝的信息。在IE6中，这些属性必须在标准模式下才有效。如果是混杂模式，就必须通过Width和Height取得相同信息。⽽对于混杂模式下的Chrome，则⽆论通过ntElement还是中的clientWidth和clientHeight属性，都可以取得视⼝的⼤⼩。1.5 ⿏标事件对象（mouseEvent）的⼀些属性X：返回⿏标触点相对于浏览器可见视区(或有效区域)左边沿的的X坐标，不包括任何滚动偏移，单位为px。这个值会根据⽤户对可见视区的缩放⾏为⽽发⽣变化。Y：返回⿏标触点相对于浏览器可见视区(或有效区域)上边沿的的Y坐标，不包括任何滚动偏移，单位为px。这个值会根据⽤户对可见视区的缩放⾏为⽽发⽣变化。：⿏标触点相对于HTML⽂档左边沿的的X坐标，单位为px。和clientX 属性不同，这个值是相对于整个html⽂档的坐标，和⽤户滚动位置⽆关。因此当存在⽔平滚动的偏移时，这个值包含了⽔平滚动的偏移。：⿏标触点相对于HTML⽂档上边沿的的Y坐标，单位为px。和clientY 属性不同，这个值是相对于整个html⽂档的坐标，和⽤户滚动位置⽆关。因此当存在垂直滚动的偏移时，这个值包含了垂直滚动的偏移。X：返回⿏标触点相对于屏幕左边沿的X坐标，单位为px。不包含页⾯滚动的偏移量。Y：返回⿏标触点相对于屏幕上边沿的Y坐标，单位为px。不包含页⾯滚动的偏移量。X：当⿏标事件发⽣时，⿏标触点距离事件源元素左侧的X轴⽅向上的距离，单位为px。Y：当⿏标事件发⽣时，⿏标触点距离事件源元素顶部的Y轴⽅向上的距离，单位为px。2 ⽰例演⽰ 2.1 元素⽔平拖拽效果实现
发布评论