Question

我对这个项目的最终目标是基本上有一个电子表格（实际上只是一个巨大的HTML表格），其中contenteditable值设置为true。我需要的另一件事是能够创建一个输入框，并将其拖动到屏幕上的任何位置，包括在电子表格上。现在，每当我尝试拖动一个输入框时，它会给我一个小红圈，在框的右上角有一条穿过它的线，告诉我我不能把它放在任何地方。

我的HTML太长了，因为它是一个巨大的电子表格，但行数减少了几百个，它基本上是这样的：

＆＃13;

$(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();
  });
});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

提前致谢！

编辑 - 我不需要将生成的元素作为输入字段。它只需要是一个可以包含文本的元素。

Answer 1

尝试制作可投放的div

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

在Jquery

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

HTML拖放...可以拖动但不会掉线

1 个答案: