jquery start dragging object when clicked on the other
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
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?
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>
加载中,请稍侯......
精彩评论