jquery начать перетаскивание объекта при нажатии на другой - PullRequest
Новая
       10

jquery начать перетаскивание объекта при нажатии на другой

2 голосов
/ 09 сентября 2010

вот сделка:

Я пытаюсь заставить палитру работать так же, как в Photoshop, поэтому у меня есть фоновое изображение палитры цветов (изображение в виде радуги 200x200 px) и круговой триггер внутри него.

Итак, если я прикреплю перетаскиваемый пользовательский интерфейс к кругу: 

$('#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');  
});

Но это не работает :( Кто-нибудь сталкивался с этой проблемой?

Спасибо

Ответы [ 2 ]

3 голосов
/ 09 марта 2011

Вот оно, только что понял.

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

Вот мой билет:

Можете ли вы нажать на jquery перетаскиваемый родительский перетащить начало?

1 голос
/ 15 января 2011

Это всего лишь черновик, не стесняйтесь попробовать. Включены Google JQuery и пользовательский интерфейс для быстрого черновика. Кстати, получить позиции от событий должно быть достаточно для преобразования его в цвета.

Удачного кодирования:) 

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