首页>问答>javascript>js drag拖拽如何记录

js drag拖拽如何记录上次位置?

2018-01-31 17:14 分类:javascript
问题描述:
我上下拖动一个元素,我希望它根据属性的变化来做特定的事情。
我需要知道自上次更改以来,“top”属性的值是增加还是减少,该怎么解决?

header.draggable({
    axis: 'y',
    containment: [0, 0, 0, '800px'],
    stop: function () {
        if (header.css('top') > '200px' && header.css('top') != 'auto') {
            header.animate({
                top: '800px'
            }, 1000);
            $('.nav').addClass('nav--active');
            $('.nav__wrapper').addClass('nav__wrapper--active');
            $('.nav__item').addClass('nav__item--active');
            $('.header__wrapper').addClass('header__wrapper--active');
        } else {
            header.animate({
                top: '0px'
            }, 500);
            $('.nav').removeClass('nav--active');
            $('.nav__wrapper').removeClass('nav__wrapper--active');
            $('.nav__item').removeClass('nav__item--active');
            $('.header__wrapper').removeClass('header__wrapper--active');
        }
    },
});
我正在使用jQuery UI Draggable来拖拽标题,如果向上拖动它,我希望它向上,如果向下拖动它,则类似于set top = 800px。
解决方案:
方案一:
可以将top保存在拖动开始事件中,并在停止事件中进行比较。代码如下:

var pos_y;
header.draggable({
    axis: 'y',
    containment: [0, 0, 0, '800px'],
    start: function (event,ui) {
        pos_y=ui.position.top;
    },
    stop: function (event,ui) {
        if(pos_y<ui.position.top){
           // dragged up
           // js教程 js拖拽如何实现
        }
        else{
           // dragged down
           // js drag教程
        }
    },
});
方案二:
定义两个变量yStart和yStop,当start和stop事件触发时,分别存储ui.offset.top值,并在stop事件中进行比较,然后做相应的业务逻辑判断。代码如下:

$("#dragHandle").draggable({
  axis: "y",
  containment: "parent",
  start: function(ev, ui) {
    this.yStart = ui.offset.top;
  },
  stop: function(ev, ui) {
    this.yStop = ui.offset.top;
    
    var px = this.yStop - this.yStart;
    if (px === 0) {
      console.log("Not moved");
    } else if (px > 0) {
      console.log("Moved Down by " + Math.abs(px) + "px");
    } else {
      console.log("Moved Up by " + Math.abs(px) + "px");
    }
  }
});
#dragWrapper {
  background: #ddd;
  position: relative;
  width: 30px;
  height: 100px;
}

#dragHandle {
  background: chocolate;
  position: absolute;
  top: 0;
  width: 30px;
  height: 30px;
}
<div id="dragWrapper">
  <div id="dragHandle"></div>
</div>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
方案三:
可以给元素添加一个属性,例如 <div number="0"> </div>,每当你拖动它时你改变这个数字<div number="2">,然后把它和最后一个数字进行比较,看它是大还是小。

下一篇:没有了
最新教程最新教程 更多>>
html2018-01-31 16:39
css2018-01-31 16:37