Javascript-форум - Фиксирование элементов в теге

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Фиксирование элементов в теге (https://javascript.ru/forum/jquery/74211-fiksirovanie-ehlementov-v-tege.html)

Фиксирование элементов в теге

Снова всем привет. Возникла проблема с jQuery UI при перемещение элемента в тег, он принимает и фиксируте только ОДИН элемент, когда мне нужно несколько. (я решил избавиться от канваса и сделал элементы обычными дивами). Напомню, что данная фича работает следующим образом http://jqueryui.com/droppable/#revert.

Игровое поле сделано через таблицу.

Вот код программы:

<div id="ships_collection" class="ships-collection" data-hidden="true">
	<div class="ship ship111"></div>
	<div class="ship ship112"></div>
	<div class="ship ship113"></div>
	<div class="ship ship114"></div>
</div>

//Перемещение кораблей
  $( function() {
    $( ".ship" ).draggable({ revert: "invalid" });
 
    $( "td" ).droppable({
      classes: {
        "ui-droppable-active": "ui-state-active",
        "ui-droppable-hover": "ui-state-hover"
      },
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          $("td").not(this).droppable("disable");
      }
    });
  });

Как сделать чтобы в ячейки таблицы можно было переносить и фиксировать несколько элементов?

Retro_1477,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
td, div.ship{
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border: 1px solid #000000;
  text-align: center;
  background-color: rgba(30, 144, 255, 1);
  margin: 0;
  padding: 0;
}
div.ship {
  background-color: rgba(105, 105, 105, 1);
  display: inline-block;
  margin-right: 2px;
}

td div.ship {
   display: block;
   margin: 0;
}
</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
var mytable = $('<table/>').appendTo('body'), tr,
td = $.map(Array(100),function(el,i) {
    i % 10 || (tr = $('<tr/>').appendTo(mytable));
    return $('<td/>').appendTo(tr);
}),
ship = $.map(Array(10),function(i) {
  return  $('<div class="ship"/>').appendTo('body');
});

$(td).droppable({
        accept: ".ship",
        drop: function(event, ui) {
            ui.draggable.appendTo(this)
        }
    });
$(ship).draggable({
        cancel: "a.ui-icon",
        revert: "invalid",
        containment: "document",
        helper: "clone",
        cursor: "move"
    });
});
  </script>
</head>

<body>


</body>
</html>

Спасибо, всё работате

А так тоже работает и без jquery) Drag and Drop API

<style>
div {
    width: 40px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.drag {
    background: #555;
}
.drag.active {
    opacity: 0.5;
}
.drop {
    border: 1px dashed #000;
}
.drop.active {
    background: #ccc;
}
</style>
  
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>

<div class="drag" draggable="true"></div>
<div class="drag" draggable="true"></div>
<div class="drag" draggable="true"></div>

<script>
var dragged;
// Required: attribute 'draggable', events 'dragstart', 'dragover', 'drop'
document.addEventListener('dragstart', function (e) {
    e.dataTransfer.setData('text', '');
    e.dataTransfer.effectAllowed = 'move';
    dragged = e.target;
    e.target.classList.add('active');
});
document.addEventListener('dragend', function (e) {
    e.target.classList.remove('active');
});
document.addEventListener('dragenter', function (e) {
    if (e.target.classList && e.target.classList.contains('drop')) {
        e.target.classList.add('active');
    }
});
document.addEventListener('dragleave', function (e) {
    if (e.target.classList && e.target.classList.contains('drop')) {
        e.target.classList.remove('active');
    }
});
document.addEventListener('dragover', function (e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'move';
});
document.addEventListener('drop', function (e) {
    e.preventDefault();
    if (e.target.classList.contains('drop')) {
        e.target.classList.remove('active');
        e.target.appendChild(dragged);
    }
});
</script>

Продолжение)