Как активировать checkbox при перетаскивании на него картинки drag-and-drop?

Question

[Николай]

Суть задачи : Есть пьедестал 1,2,3 место. Есть три картинки в опросе, которые надо переместить по местам.

Примеров по перемещению картинки в сети полно, а как дальше действовать,

чтобы закинуть результат в $_POST (неясно !) потом в $_SESSION... накопить результат ответов и выдать результат (это ясно).

Answer 1

[Денис]

Не ясно одно - что вам нужно передать на сервер: то ли значения атрибутов src изображений, то ли сами изображения, или что-то еще. И зачем нужны именно checkbox-ы? В общем, сделал вам такой пример.

HTML

<div>
    <label>
        <input type="hidden" name="stand[3]">3
    </label>
    <label>
        <input type="hidden" name="stand[1]">1
    </label>
    <label>
        <input type="hidden" name="stand[2]">2
    </label>
</div>
<div>
    <img src="http://automated-testing.info/images/emoji/apple/smile.png" alt="">
    <img src="http://radar.techcabal.com/images/emoji/apple/grin.png" alt="">
    <img src="http://www.stickees.com/files/emoticons/emojicons/148-happy-smile.png" alt="">
</div>
<button>GO!</button>

jQuery

var but = $('button'),
    inp = $('[name^="stand"]');
$('img').draggable({
    revert: 'invalid'
});
$('label').droppable({
    accept: function() {
        return $.trim($('input', this).val()) === '';
    },
    tolerance: 'fit',
    drop: function(e, ui) {
        $('input', this).val(ui.draggable.attr('src'));
        $(ui.draggable).draggable('disable');
        var hasEmpty = inp.filter(function() {
            return $.trim($(this).val()) === '';
        }).length;
        but[hasEmpty ? 'hide' : 'show']();
    }
});

but.on('click', function() {
    $.ajax({
        url: '/echo/html/',
        type: 'POST',
        data: inp,
        success: function(data) {}
    });
});

На сервер передаём массив с url изображений, где индексами являются соответствующие места на пьедестале:

print_r($_POST['stand']);
Array (
    [1] => path/to/img1.png
    [2] => path/to/img2.png
    [3] => path/to/img3.png
)

Comments

[Николай]

Спасибо !

[Николай]

А что почитать по этой теме подскажите?

[Денис]

Николай , для того, чтобы пользоваться jQuery, ничего особо читать не нужно. Достаточно знать методы библиотеки. А вот для того, чтоб использовать jQuery качественно, нужно начинать с нативного JavaScript.