HTMLドラッグアンドドロップ...ドラッグできますがドロップしない

このプロジェクトで私の最終目標は、contenteditable値がtrueに設定されたスプレッドシート（実際には巨大なHTMLテーブル）を基本的に持つことです。もう一つ必要なことは、入力ボックスを作成し、スプレッドシートを含む画面のどこにでもドラッグできることです。今すぐ、入力ボックスをドラッグしようとすると、箱の右上隅にある小さな赤い円が私に与えられ、どこにでもドロップできないことがわかります。それは巨大なスプレッドシートだからHTMLドラッグアンドドロップ...ドラッグできますがドロップしない

私の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>

ありがとう！

EDIT - 生成された要素を入力フィールドにする必要はありません。それはテキストを入れることができる要素でなければなりません。

出典

2016-10-05 Gabriel Schetter

は、それが正常に動作しますようにそれはそれはない...ように見えるんがドロップ可能なdivの

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

とjQuery

で

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

出典

2016-10-05 11:53:55 Uberish

を作ってみましょう。しかし、提案をありがとう！ –

divに高さと幅を指定しましたか？同じエラーが発生しましたか？あなたは$（ "body"）を試すこともできます。あなたがどこにでもドロップ可能であることを望むなら... – Uberish

$（ "body"）.dropable（）;を試してみます。私はdivの幅と高さが各ボックスの追加に伴って増加すると考えましたが、いくつかの値を設定しようとします。再度、感謝します！ –

HTMLドラッグアンドドロップ...ドラッグできますがドロップしない

答えて

関連する問題