jquery start dragging object when clicked on the other

Question

here's the deal:

I'm trying to make a colorpicker act much like in Photoshop, so I have a background image of a color picker (rainbow-like image 200x200 px) and a circle trigger inside of it.

So, if i attach a draggable UI to a circle:

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

Works great. But here's another issue.. I want the drag to start when I click the parent block of the circle (i.e. the color picker image).

Here's the HTML markup:

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

So when I click on .inner2, I want .circle to start dragging.

I've tried

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

But that doesn't work :( did anyone happen to meet this problem?

Thanks

This seems like an inappropriate use of a draggable UI element. It seems you want a cursor to indicate where the user last clicked on the colour grid, *not* a cursor which the user interacts with directly. — strager, Sep 08 '10 at 22:08
@strager, but what about photoshop color picker? it acts straightly like i want to act in html, but they use that draggable element like i do.. or do you think i should approach it from anothe side (without draggable etc.) ? — Alex K, Sep 08 '10 at 23:48
Try triggering mousedown on the picker. May be the solution, may be not, but it's worth the try. Like: `$("#rainbow-color-picker .circle").mousedown();` — Z. Zlatev, Sep 09 '10 at 21:26

score 3 · Accepted Answer · edited May 23 '17 at 12:07

3

Here it is, just figured it out.

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

Here was my ticket:

Can click on jquery draggable parent start drag?

edited May 23 '17 at 12:07

Community

1
1

answered Mar 09 '11 at 00:36

Dave Stein

8,653
13
56
104

score 1 · Answer 2 · answered Jan 15 '11 at 06:39

This is just a draft, feel free to try it out. Included google jQuery and UI for quick draft. Btw, getting the positions from the events should be enough for converting it into colors.

Happy coding :)

<!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 start dragging object when clicked on the other

2 Answers2

Linked