Получение значения CSS и его обновление в SQL

0

Он, ребята,

У меня есть div, который я делаю в css следующим образом:

echo '#'. $pess2['naam'] .' { width: 190px; height: 90px; padding: 0.5em; float: left; left:'. $pess2['left'] .'px; top:'. $pess2['top'] .'px; visibility:'. $view .'; }'

Теперь, когда я перемещаю этот div с:

$( "#3" ).draggable({ containment: "#containment-wrapper", scroll: false });

Я хочу загрузить его в мою базу данных. Мой вопрос: как я могу получить новые значения left и top (x и y) в PhP?

Теги:

4 ответа

1
Лучший ответ

Как упоминалось Wietse, используйте событие остановки (http://jqueryui.com/draggable/#events), чтобы обнаружить, когда перетаскивание остановлено. В событии остановки вы можете использовать javascript getBoundingClientRect() чтобы получить расположение элемента DOM на экране.

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

Я создал скрипку, чтобы объяснить, как работает .getBoundingClientRect() http://jsfiddle.net/B62vM/

  • 0
    Хорошо, я получаю весь код, единственная проблема, которая у меня есть сейчас, состоит в том, что этот код не работает: stop: function() { $.post("upload.php", { left: this.getBoundingClientRect().left, top:this.getBoundingClientRect().top }) Это не активирует мой php файл?
  • 0
    Работает ли у вас ссылка jsfiddle, вы получаете значения оповещений после окончания перетаскивания?
Показать ещё 6 комментариев
0

на самом деле, вы могли бы сделать это, смешивая предыдущие ответы, но с небольшими исправлениями:

Не рекомендуется использовать числовые идентификаторы, если ваша $pess2['naam'] является числовой, попробуйте что-то вроде echo '#drag'. $pess2['naam'].'... echo '#drag'. $pess2['naam'].'..., то ваша часть jQuery будет:

$('#drag3').draggable({
    containment: "#containment-wrapper", 
    scroll: false
    // use stop here instead of drag to send values only when div stops moving
    stop: function(){
        var offset = $(this).offset();
        // send x and y to your script
        $.post("upload.php", {x: offset.left, y: offset.top});
    }
});

На сервере у вас будут переменные $_POST['x'] и $_POST['y'], которые вы можете использовать в SQL-запросе

mysql_query("UPDATE nvt SET left='".$_POST['x']."', top='".$_POST['y']."'")...

Вот небольшой пример: скрипка, которая отправляет данные и предупреждения "обновляется!". на успех. Обратите внимание, что селектор css, селектор jQuery и имя div должны быть одинаковыми.

0
$("#takeHiddenVariable").val($("#idOfYourDiv").attr("style"));

Используйте скрытую переменную в $ _POST ['takeHiddenVariable'] в вашем php-скрипте.

0

Используйте событие остановки (http://jqueryui.com/draggable/#events) и отправляйте данные с помощью функции $.post() (http://api.jquery.com/jQuery.post/)

Чтобы получить эту должность, посмотрите здесь: http://jsfiddle.net/davidThomas/DGbT3/:

$('#dragThis').draggable(
{
    drag: function(){
        var offset = $(this).offset();
        var xPos = offset.left;
        var yPos = offset.top;
        $('#posX').text('x: ' + xPos);
        $('#posY').text('y: ' + yPos);
    }
});

(из этого вопроса: как получить позицию перетаскиваемого объекта)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню