Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.06.2018, 16:53
Аспирант
Отправить личное сообщение для Retro_1477 Посмотреть профиль Найти все сообщения от Retro_1477
 
Регистрация: 14.04.2018
Сообщений: 40

Фиксирование элементов в теге
Снова всем привет. Возникла проблема с 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");
      }
    });
  });


Как сделать чтобы в ячейки таблицы можно было переносить и фиксировать несколько элементов?
Изображения:
Тип файла: jpg Screenshot_1.jpg (7.7 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 21.06.2018, 20:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,805

droppable ship
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>
Ответить с цитированием
  #3 (permalink)  
Старый 22.06.2018, 13:10
Аспирант
Отправить личное сообщение для Retro_1477 Посмотреть профиль Найти все сообщения от Retro_1477
 
Регистрация: 14.04.2018
Сообщений: 40

Спасибо, всё работате
Ответить с цитированием
  #4 (permalink)  
Старый 23.06.2018, 23:48
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,921

А так тоже работает и без 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>

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

Последний раз редактировалось Rise, 26.06.2018 в 17:45.
Ответить с цитированием
  #5 (permalink)  
Старый 24.06.2018, 00:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,805

Rise,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фиксирование элемента в теге Retro_1477 jQuery 3 21.06.2018 12:37
Массив из элементов другого массива, взятых в случайном порядке Basil_JS Общие вопросы Javascript 6 12.04.2015 13:07
Удалить и вернуть массив из удаленных элементов splice Paulyyy Общие вопросы Javascript 15 29.05.2013 14:36
запретить изменение количество элементов в списке Antistas jQuery 0 05.12.2012 12:05
Получить список ВСЕХ элементов DOM Почемучкин Events/DOM/Window 7 16.04.2012 10:33