当单击另一个对象时，jquery 开始拖动对象答案

【问题标题】：jquery start dragging object when clicked on the other当单击另一个对象时，jquery 开始拖动对象
【发布时间】：2010-09-08 21:59:57
【问题描述】：

这是交易：

我正在尝试使颜色选择器的行为与 Photoshop 中的行为非常相似，因此我有一个颜色选择器的背景图像（类似彩虹的图像 200x200 像素）和一个圆形触发器。

所以，如果我将一个可拖动的 UI 附加到一个圆圈：

$('#rainbow-color-picker .circle').draggable({containment: 'parent'});

效果很好。但这是另一个问题。我希望在单击圆圈的父块（即颜色选择器图像）时开始拖动。

这是 HTML 标记：

<div class='rainbow-color-picker' id='rainbow-color-picker'><div class='inner1'><div class='inner2'>
 <div class='circle'><div class='circle-inner'></div></div>
</div></div></div>

所以当我点击 .inner2 时，我希望 .circle 开始拖动。

我试过了

$("#rainbow-color-picker .inner2").bind( "mousedown", function(event) {  
  $("#rainbow-color-picker .circle").trigger('dragstart');  
});

但这不起作用:(有人碰巧遇到这个问题吗？

谢谢

【问题讨论】：

这似乎是对可拖动 UI 元素的不当使用。您似乎想要一个光标来指示用户最后点击颜色网格的位置，不是用户直接与之交互的光标。
@strager，但是 Photoshop 颜色选择器呢？它的行为就像我想在 html 中一样，但他们像我一样使用那个可拖动的元素.. 还是你认为我应该从另一边接近它（没有可拖动等）？
尝试在选择器上触发 mousedown。可能是解决方案，可能不是，但值得一试。喜欢：$("#rainbow-color-picker .circle").mousedown();

标签： javascript jquery jquery-ui draggable

【解决方案1】：

在这里，刚刚想通了。

$("#rainbow-color-picker .circle").trigger( event );

这是我的票：

Can click on jquery draggable parent start drag?

【讨论】：

【解决方案2】：

这只是一个草稿，请随时尝试。包括用于快速草稿的谷歌 jQuery 和 UI。顺便说一句，从事件中获取位置应该足以将其转换为颜色。

编码愉快:)

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
    $(document).ready(function() {
        var pos = $('#color-pos');
        $('#color-field-circle').draggable({
            containment: 'parent',
            start: function(e) {
                pos.html("start: "+e.pageX+" "+e.pageY);
            },
            drag: function(e) {
                pos.html("drag: "+e.pageX+" "+e.pageY);
            },
            stop: function(e) {
                pos.html("stop: "+e.pageX+" "+e.pageY);
            }
        });
    });
    </script>
    <style type="text/css" media="screen">
        #color-picker{width:200px;height:250px;background:#ddd;padding:10px;}
        #color-field{width:180px;height:230px;background:#ccc;}
        #color-field-circle{cursor:pointer;width:16px;height:16px;background:#f30;}
    </style>
</head>
<body>
    <div id="color-picker">
        <div id="color-field">
            <div id="color-field-circle"></div>
        </div>
        <div id="color-pos"></div>
    </div>
</body>
</html>

【讨论】：