可拖动| Jquery UI。如何在拖动事件上添加类

时间:2017-10-28 13:03:19

标签: jquery jquery-ui draggable jquery-ui-draggable

我正在尝试创建一个滑块,以便用户拖动滑块球,一旦球被拖动,它就会捕捉到包含元素的末尾并触发回调函数(当您解锁屏幕时,请考虑7之前的IOS通过拖动滑块,拖动滑块和屏幕解锁)。我认为最简单的方法是添加一个类,将滑块球的x轴更新到其容器的末尾。

Slide to unlock

因此,我将元素设置为可拖动的相关包含元素和轴,并沿着容器完美拖动。

sliderBall.draggable({
          containment: $('div.slider-line'),
          axis: "x"
          });

然后我认为它就像绑定&add.class'一样简单。对'拖''这样的事件:

sliderBall.on('drag',function() {
    $(this).addClass('slider-toggle');
});

奇怪的是,选择器被识别为对象而不是DOM元素?

有人可以帮我吗?

2 个答案:

答案 0 :(得分:0)

您可以使用此代码:

<强> HTML

<div class="sliderBall" data-count="1">drag me!</div>
<div id="divDrop"></div>

<强> JS

$(".sliderBall").draggable();

$("#divDrop").droppable({
  drop: function(event, ui) {    
    ui.draggable.addClass("dropped")
  }
});

<强> Online demo (jsfiddle)

答案 1 :(得分:0)

我已经解决了这个问题,但决定在其他人遇到同样问题的情况下提出问题。问题是我添加的CSS类,由于某种原因,该类被添加但它不想更改滑块球的X位置,除非我在类中使用'transformX'而不是'left'。 / p>