Question

在Google上花了几个小时尝试自己，但没有用。

我正在做的是创建一个DIV并使其可拖动。并在其中添加滑块以旋转图像。创建DIV并使其可拖动并添加滑块都是动态完成的。我正在做的基本上是点击一个箭头工具，它克隆容器内的箭头工具，使其可拖动，同时添加一个滑块。结果如下所示。

<div class='draggable'>
  <img src='example.gif'>
  <div class='slider'></div>
</div>

问题是滑块可以在DIV内部拖动。如何使DIV可拖动但仍然可以使滑块正常工作？

新解决方案

是的，我确实搞清楚了，并决定使用SHIFT键进行另一种解决方案来进行旋转。我能够使用http://www.elated.com/articles/smooth-rotatable-images-css3-jquery/解决方案，现在我可以在移动鼠标时使用SHIFT键简单地旋转图像。比滑块更简单，效果很好！

Answer 1

假设您正在使用jQuery UI Draggable和Slider组件，这应该不是问题 - 默认情况下两者不应相互冲突。但是，您仍然可以使用cancel选项明确排除滑块：

$('.draggable').draggable({
    cancel: '.slider'
});

有关此的简单示例，请参阅此jsfiddle：http://www.jsfiddle.net/yijiang/KMF2v/2

假设你不使用jQuery UI ......那么，在这种情况下，我建议你出去立即获取它，因为编写自己的滑块和拖放''-drop组件是认真努力。

然而，显而易见的解决方案是使用stopPropagation()

阻止事件冒泡DOM树

$('.slider').click(function(event){
    event.stopPropagation();
});

jquery Draggable DIV里面有滑块

1 个答案: