Перетаскивание HTML... Можно перетаскивать, но не перетаскивать

#javascript #jquery #html #drag-and-drop

#javascript #jquery #HTML #перетаскивание

Вопрос:

Моя конечная цель в этом проекте — в основном иметь электронную таблицу (на самом деле просто гигантскую таблицу HTML) со значением contenteditable, равным true. Другая вещь, которая мне нужна, — это возможность создавать поле ввода и перетаскивать его в любом месте экрана, в том числе в электронной таблице. Прямо сейчас, всякий раз, когда я пытаюсь перетащить поле ввода, оно выдает мне маленький красный кружок с линией через него в правом верхнем углу окна, сообщая мне, что я нигде не могу его удалить.

Мой HTML такой длинный, потому что это огромная электронная таблица, но с меньшим количеством строк на пару сотен, в основном это выглядит так:

 $(document).ready(function() {
  $("#addTileButton").click(function() {
    $("body").append("<div id=draggable></div>");
    var tile = $("<form><input id=tile draggable=true type=text> </form>");
    $("#draggable").append(tile);
    $("#tile").draggable();
  });
});

 td {
    border: 1px solid black;
  }
  #tile {
    cursor: move;
  }

 <!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script>
</head>
<button id="addTileButton">Click to add tile</button>
<div contenteditable="true" id="tableDiv">
  <table cellspacing="0" border="0">
    <colgroup width="509"></colgroup>
    <colgroup span="5" width="166"></colgroup>
    <tr>
      <td height="32" align="left" valign=bottom><b><font face="Cambria">State Name</font></b>
      </td>
      <td align="left" valign=bottom><b><font face="Cambria">GA (P)</font></b>
      </td>
      <td align="left" valign=bottom><b><font face="Cambria">C.3</font></b>
      </td>
      <td align="left" valign=bottom><b><font face="Cambria">ExCom</font></b>
      </td>
      <td align="left" valign=bottom><b><font face="Cambria">HRC</font></b>
      </td>
      <td align="left" valign=bottom><b><font face="Cambria">SC</font></b>
      </td>
    </tr>
    <tr>
      <td height="32" align="left" valign=bottom>Afghanistan</td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
      </td>
      <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
      </td>
    </tr>
    <tr>
      <td height="32" align="left" valign=bottom>Albania</td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
      </td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
      </td>
    </tr>
    <tr>
      <td height="32" align="left" valign=bottom>Algeria</td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom><font color="#000000"><br></font>
      </td>
      <td align="left" valign=bottom bgcolor="#999999"><font face="Cambria"><br></font>
      </td>
    </tr>

Заранее спасибо!

РЕДАКТИРОВАТЬ — мне не нужно, чтобы сгенерированный элемент был полем ввода. Это просто должен быть элемент, в котором может быть текст.

Ответ №1:

Попробуйте создать droppable div

 <div id="droppable"> 
  ...
</div>

И в Jquery

  $("#droppable").droppable();

1. Хотя кажется, что это будет работать правильно… это не так. Спасибо за предложение, хотя!

2. Вы указали некоторую высоту и ширину для div? Вы получили ту же ошибку? кстати, вы также можете попробовать $(«body»).droppable(); если вы хотите, чтобы его можно было перетаскивать в любом месте…

3. Я попробую $(«body»).droppable(); . Я полагал, что ширина / высота div будет увеличиваться с добавлением каждого поля, но я попробую установить некоторые значения. Еще раз спасибо!