Блог

Я хочу разместить перетаскиваемый элемент в родительском центре divs. Смотрите пример здесь

 $("#mover").draggable({
    revert: true,
    containment: "parent"
});

<div style="width: 100px; height: 100px;" id="joystick">
    <div style="width: 10px; height: 10px" id="mover"></div><br />
</div>
  

Теперь это работает нормально, но как только я хочу расположить объект mover в joystick центре, перетаскивание выполняется не так, как я хочу.

Я попытался расположить его, указав mover a margin: 45px 0 0 45px; , но затем (из-за того, что модель box видит поле как часть поля) перетаскивание по-прежнему работает только вниз и вправо, а не вверх и влево.

Как вы видите, я хочу создать что-то вроде «джойстика», используемого для управления чем-либо. Следовательно, он должен быть центрирован, но также быть подвижным по всем осям».

Любые идеи будут высоко оценены.

Вот полная рабочая демонстрация, вы должны расположить центр джойстика с помощью position:relative; : http://jsfiddle.net/E6BQe /

HTML:

 <div id="coords">amp;nbsp;</div>
<div id="joystick">
    <div id="mover"></div>
</div>
  

CSS:

 #joystick { background-color:whitesmoke; width: 100px; height: 100px; padding:0px; }
#mover { background-color:red; position:relative; margin:0px; padding:0px; width: 10px; height: 10px; left:45px; top:45px; }
  

javascript:

 $("#mover").draggable({
    revert: true,
    containment: "parent",
    create: function(){
        $(this).data("startLeft",parseInt($(this).css("left")));
        $(this).data("startTop",parseInt($(this).css("top")));
    },
    drag: function(event,ui){
        var rel_left = ui.position.left - parseInt($(this).data("startLeft"));
        var rel_top = ui.position.top - parseInt($(this).data("startTop"));
        $('#coords').text(rel_left   ", "   rel_top);
    },
    stop: function(){
        $('#coords').html("amp;nbsp;");
    }
});
  

Добавьте следующий CSS:

 #joystick {position:relative}
#mover {position:absolute;top:45px;left:45px}
  

Рабочий пример: http://jsfiddle.net/52V6h /

Разница между этим и margin заключается в том, что это просто устанавливает позицию, сохраняя при этом контейнеры неизменными. Изменение поля заставит #mover всегда находиться на расстоянии 45 пикселей от угла поля.