ФорумПрограммированиеJavaScript → jquery + ajax, перемещение объекта с клетки на клетку.

jquery + ajax, перемещение объекта с клетки на клетку.

  • pasha

    Сообщения: 1048 Репутация: N Группа: Адекваты

    Spritz 26 июня 2009 г. 21:53

    Допустим есть поле размерностью 3 на 3.
    Я хочу перемещать по нему объект. Нажимаем на объект, потом на клетку… пока что без анимации. для каждой клетки у меня есть значение <div id="kletka_A1">… <div id="kletka_C3">
    Правильно ли я делаю с клетками?

    Подскажите, пожалуйста, на что опираться?может кусок кода…

    1. pole.png (104)
  • NRG

    Сообщения: 4761 Репутация: N Группа: в ухо

    Spritz 26 июня 2009 г. 21:54, спустя 1 минуту

    Подскажите, пожалуйста, на что опираться?может кусок кода…

    JQuery
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 26 июня 2009 г. 22:38, спустя 44 минуты 9 секунд

    точно видел пятнашки на жуквери. найди и посмотри
    Спустя 20 сек.
    называется пазлы
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 26 июня 2009 г. 22:45, спустя 6 минут 36 секунд

    Pasha, да в блогах очень много переводов про пазлы, смотри там, там и с анимацией сразу…
    Спустя 89 сек.
    пазлы на jquery
    Спустя 44 сек.
    воть хабр
  • pasha

    Сообщения: 1048 Репутация: N Группа: Адекваты

    Spritz 28 июня 2009 г. 1:18, спустя 1 день 2 часа 33 минуты

    спасибо! во http://interface.eyecon.ro/demos/sort_floats.html похожее… постараюсь доделать
    Спустя 66751 сек.
    почитал про jquery… столкнулся с ситуацией перемещения объекта… использую Draggable… подскажите как можно при наведении на клетку привязать объект к ней?
    Спустя 2874 сек.
    разобрался
    Спустя 5649 сек.
      <script type="text/javascript">
    $(document).ready(function(){
    $("#draggable").draggable();
    $(".kletka").droppable({
    drop: function() { alert($(".kletka").attr("id"));}
    });
    });
    </script>
    </head>
    <body style="font-size:62.5%;">


    <div id="A1" class="kletka">Пустая клетка</div><br />
    <div id="A2" class="kletka">Пустая клетка</div>
    <div id="draggable">Кубик</div>


    При наведении на кубик хочу возвращать id той клетки… $(".kletka").attr("id") … всегда возвращается A1… т.е первое значение. не получается(
    Спустя 2376 сек.
    разобрался
    Спустя 13420 сек.
    <script type="text/javascript">
    $(document).ready(function(){
    $("#draggable").draggable();

    $(".kletka").droppable({


    drop: function() {

    //<div id="draggable">Герой</div>
    //<td id="A1" class="kletka" width="70" height="70" valign="top"><img src="images\pixel.gif" width="70" height="70"></td>

    kletka = $(this).attr("id");

    //$("#"+kletka+".kletka").css("text-align", "center");
    //здесь когда навели "Героя" на поле нужно его выравнивать

    alert("Вы сходили на клетку "+kletka+" !");

    //Ajax

    $.post('ajax.php',
    {
    type: "test-request",
    param1: kletka,
    param2: 2
    },
    onAjaxSuccess
    );
    function onAjaxSuccess(data){ }


    }
    });
    });
    </script>


    Я использовал draggable и droppable. Т.е когда объект попадает в радиус droppable делаем действие… в моем случае нужно выравнивать красный кубик… я сделал так $("#"+kletka+".kletka").css("text-align", "center")… думал что при наведении все сработает… в тупике)

    тут как все работает…
    http://anokolov.ho-sting.ru/jq/i2.html

Пожалуйста, авторизуйтесь, чтобы написать комментарий!