可拖动 | jQuery 用户界面。如何在拖动事件上添加类

Posted 2023-05-08

【中文标题】可拖动 | jQuery 用户界面。如何在拖动事件上添加类

【英文标题】：Draggable | Jquery UI. How to addClass on drag event

【发布时间】：2018-04-09 22:38:55

【问题描述】：

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

所以我用相关的容器元素和轴将元素设置为可拖动的，它可以完美地沿着其容器拖动。

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

然后我认为它就像将'addClass'绑定到'drag'事件一样简单：

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

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

谁能帮我解决这个问题？

【参考方案1】：

您可以使用此代码：

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)

【参考方案2】：

我已经解决了这个问题，但决定留下这个问题，以防其他人有同样的问题。问题是我正在添加的 CSS 类，由于某种原因正在添加该类，但它不想更改滑块球的 X 位置，除非我在类中使用“transformX”而不是“左”。