Question

这是交易：

我正在尝试使用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');  
});

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

由于

Answer 1

在这里，只是弄明白了。

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

这是我的门票：

Can click on jquery draggable parent start drag?

Answer 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>

jquery在点击另一个时开始拖动对象

2 个答案: