Использование appendTo для создания родителей смены div

Question

Итак, я решил, что лучший способ научиться программировать с помощью JS и jQuery - это попытаться создать что-то, что мне понравилось. Поэтому я решил создать свою собственную шахматную доску, используя минимальные HTML и, в основном, JS и JQuery.

Код ниже показывает плату и вставляет изображения в исходное положение плиток.

$(document).ready(function(){ 
    //draw the chess board 
    var amount = 0; 
    var columnColor = "Black"; 
    while(amount < 64){ 
     if(amount % 9 === 0){ 
      amount++ 
     } 
     else if (amount < 18){ 
      $(".mainWrapper").append('<div class="block'+columnColor+'"><img class="pawn" src="images/whitePawn.png" alt="White Pawn" height="42" width="42"></div>') 
      amount++ 
     } 
     else if (amount > 45){ 
      $(".mainWrapper").append('<div class="block'+columnColor+'"><img class="pawn" src="images/blackPawn.png" alt="White Pawn" height="42" width="42"></div>') 
      amount++ 
     } 
     else{ 
      $(".mainWrapper").append('<div class="block'+columnColor+'"></div>') 
      amount++ 
     } 
     switch (columnColor){ 
      case "White": 
       columnColor = "Black"; 
       break; 
      case "Black": 
       columnColor = "White"; 
       break; 
     } 
    }; 
}); 

console.log("I ran! :D"); 

Следующим шагом было бы сделать части возможными для перемещения. Теперь сначала я решил, что сделаю это, используя jQuery свой метод .draggable. Что работает (вроде), но не делает то, что я хочу, поскольку он не перемещает их по-чистым (части могут перекрывать квадраты), и это не ограничивает количество квадратов, которые пользователь может перемещать.

Итак, быстрый поиск по поиску позже, и я нашел сообщение THIS в Stackoverflow. Там они описали способ использования appendTo для перемещения элементов в другой родительский div. Это было бы идеально (по крайней мере, я думаю) для моей ситуации.

Хотя, поскольку мое понимание JS все еще ограничено, я не могу обмотать голову, как это сделать.

Я понимаю, что для выбранного изображения вам понадобится какой-то селекторный класс. Тогда должно быть событие click, которое перемещает выбранное изображение в выбранный вами div.

Просто для вашего развлечения я не мог превзойти THIS.

Любая помощь или подсказки оцениваются!

Answer 1

Вы можете объединить mousedown на одном поле с mouseup на соседнюю:

Demo

var piece; 

$('div').mousedown(function(e) { 

    e.preventDefault(); 
    piece = $(this).find('img'); 
}) 
.mouseup(function() { 

    $(this).append(piece); // same as piece.appendTo(this);  
}); 

Там нет ограничений на расстояние еще, конечно, и это плохо работа для всей области (если есть изображение).

Я добавил preventDefault(), поэтому нет выбора элемента, который усложняет перетаскивание.

Для размещения кусков вам, вероятно, придется работать с координатами полей для прямого подхода. Вы можете посмотреть на e.clientX и getBoundingClientRect.