单击DIV或其子项时的Jquery Draggable

时间:2013-03-21 18:39:38

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

是否可以在div的子项上单击鼠标并拖动父项时启用拖动?

在这个例子中,我试图让draggable为div和select工作。当您单击选择并尝试拖动时没有任何反应。

http://jsfiddle.net/Trhs4/5/

<div id="draggable" class="ui-widget-content">
<select>
<option>Drag Me</option>
</select>
</div>

 $(function() {
     $( "#draggable" ).draggable();
 });

3 个答案:

答案 0 :(得分:1)

以下是一个示例: LIVE DEMO

它与你的组合框不太兼容,因为它捕捉鼠标点击事件以显示其选项,但它正在工作。

$(document).ready(function(){
      var click = false,
      top = null,
      left = null;

    $(document).bind('mousemove', function (e) {
        if (click == true) {
           $('#draggable').css({
             left: e.pageX - left,
             top: e.pageY - top
           });
        }
    });

    $('#draggable').draggable().click(function(e) {
        top = e.pageY - $('#draggable').position().top; 
        left = e.pageX - $('#draggable').position().left;
        click = !click;
        return false;
    });

    $('html').click(function() {
        click = false;
    });
});

答案 1 :(得分:0)

我不认为它可能是由于选择如何使用不同的浏览器。 您可以使用UL和LI构建自己的选择。

或者您可以在用户可以选择隐藏的选项上方添加[拖我]。 &lt; - 反正用户友好了。

答案 2 :(得分:0)

由于事件处理程序的原因,我认为这是不可能的。 <option>有自己的事件处理程序,因此它可以防止来自JQuery的拖放事件触发。您可以尝试其他对象,例如<ul><li>。请看一下这个示例:jquery sample