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

发布于 2024-09-18 04:01:54 字数 838 浏览 5 评论 0原文

事情是这样的：

我试图让一个颜色选择器的行为就像在 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');  
});

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

谢谢

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅气称霸 2024-09-25 04:01:54

就在这儿，刚刚想通了。

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

这是我的票：

可以点击jquerydraggableparent开始拖动吗？

回复收藏 0 原文

柒夜笙歌凉 2024-09-25 04:01:54

这只是一个草案，请随意尝试。包括 google 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>

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>

回复收藏 0 原文

~没有更多了~