2

現在、インライン テキスト エディターを設計しています。ユーザーは、画像を好きな場所にドラッグ アンド ドロップすることができます。

エディターは完全にベースになっており、スタイルと書式設定のためiFrameにネストされた s に大きく依存しています。divユーザーが画像をコンテンツの中央にドラッグしてそこにドロップすると、ドロップ ゾーンの上のコンテンツが 1 つにパッケージ化されdiv、画像がその下に配置され、ドロップ ゾーンの下のコンテンツが別の にパッケージ化されます。div画像の下に配置されます。

しかし、div座標に基づいて a を 2 つの部分に分割する方法がわかりません (jQuery ドロップ ハンドラーから取得できます)。誰かがそれを行う方法についてアイデアを教えてもらえますか?

4

2 に答える 2

6

私はあなたがやろうとしていることの要点を理解していると思います.1つの可能性を示すために短いスクリプトを作成しました. テキストを文字ごとに 1 つの div に分割し、それらの div を並べ替え可能にして、テキストの中央に画像をドラッグ アンド ドロップできるようにします。

HTML

<span class="sortable">
       <img id="image" src="https://si0.twimg.com/profile_images/1842775519/profile_normal.png" />
        <input type="text" size="1" id="tb"/>
</span>

Javascript

$(function () {
    $(".sortable").sortable();  //Makes panel sortable (needs jquery and jquery UI)
    $("#tb").keyup(function () { //binds keyup event on the input box
        $('<div>' + $(this).val() + '</div>').insertBefore(this);  //adds the input box value to a new div and inserts it into the DOM before the input box itself
        $(this).val(''); // empties the input
    });
});

CSS

* {
    float:left
}
.sortable {
    border: solid 1px black;
    width:200px;
    float:left
}

ここで動作するフィドルを参照してください http://jsfiddle.net/urbanbjorkman/cFfS9/1/

これは、テキストの大きなチャンクに対するちょっとしたマッドハッター ソリューションかもしれません。そして、まだ多くの作業が必要です (明らかに、これは数行の JavaScript に過ぎないため)。

しかし、テキストを 1 つの div に保持することは考えられないことではありません。そして、それを sortstart イベントで個別の要素に分割します。そして、sortstop イベントで、接続しているすべてのテキストを一緒に結合し、画像を元の場所に残します。したがって、画像を間に挟んで div を 2 つに分割することで、要求したものが得られます。

于 2013-01-29T23:32:54.250 に答える
0

あなたの質問は私を少し混乱させます。しかし、jQuery UI API からのドラッグ可能およびソート可能を調べましたか。

http://jqueryui.com/sortable/

http://jqueryui.com/droppable/

自己選別コンテナを有効にするのに適しています。そして、それらがdivに適用されることを考えると、これを機能させることができるはずです。（少しjQueryのエルボーグリースを与えられた）

于 2013-01-29T04:53:23.283 に答える