0

jqueryを介してサイズ変更およびドラッグ可能なdivがあります。

また、niceedit で編集することもできます。

私が抱えている問題は、編集モードで div がテキストに収まるように拡張されず、テキストが div からこぼれている間に div にテキストを追加したときです。

更新されたコンテンツから div の高さと幅を更新する方法を知っている人はいますか?

この例で、テキストの追加を開始すると、ボックスが展開されないことがわかります。

http://jsfiddle.net/j6FLa/20/

jsfiddle に一致するコード

.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
cursor:move;
z-index:2
}

#draggable {
min-width:150px;
min-height:150px;
height:auto;
width:auto;
border:1px solid #ff0000;
padding:25px;
}



//<![CDATA[
bkLib.onDomLoaded(function () {
    var myNicEditor = new nicEditor();
    myNicEditor.setPanel('myNicPanel');
    myNicEditor.addInstance('draggable');
});
//]]>


$("div.dragbox").dblclick(function (e) {
    $('.dragbox').css('cursor', 'select');
    $(this).draggable('disable').removeClass('ui-state-disabled').focus();
    }).on('blur', function () {
    $(this).draggable('enable');
});

$(function () {
    $("#draggable").draggable().resizable();
});


<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>
4

3 に答える 3

1

私はまだプログラミングの初心者なので、もっと良い解決策があるかもしれません。しかし、同様の問題で私が何をしたかを示すことができます。それが必要かどうかはわかりません。

function getHeight(id)
{
    if(document.getElementById(id) == null)
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

幅/高さを取得する要素の ID を送信して、この関数を作成して呼び出します。この関数は、最初に ID が存在するかどうかを確認し、存在しない場合は 0 を返します。存在する場合は、内側の幅/高さを返します。求めている ID が存在することが 100% 確実な場合は、関数の最後の行だけが必要です。

次のように使用できます。

var h = getHeight("draggable");

これにより、ドラッグ可能な div の高さが返され、変数 h に格納されます。

それが役に立つことを願っています:)

于 2013-08-06T14:46:14.083 に答える
0

私の以前の回答は、高さ/幅を見つけることしかできませんが、実際にはdiv自体の高さ/幅を変更しません。

したがって、前の回答を使用して幅/高さが見つかった後、問題の div の幅/高さを変更する方法を次に示します。

div ID が「ドラッグ可能」で、p ID が「テキスト」であるとしましょう。テキストの編集が完了したら、関数 (以下で定義) を呼び出して幅と高さを更新できます。

resize("draggable", "text");

次のように、JavaScript で CSS スタイルを模倣できます。

function resize(id1, id2)
{
    var divName = document.getElementById(id1);
    divName.style.position = absolute;
    divName.style.width = getWidth(id2)+"px"; // remember the +"px"!!
    divName.style.height = getHeight(id2)+"px";
}

これにより、div の高さと幅がテキスト領域の高さと幅に等しくなるように設定されます。そうすることで、プロジェクト内の他のIDに応じて、任意のIDの高さと幅を変更できます。getWidth() と getHeight() は私の以前の投稿への参照です。

私の2つの答えを組み合わせることで、あなたが探しているものを達成できるはずです。初めて適切な答えを出さなかったことをお詫びしますが、私はプログラミングとこのサイトの両方にまだ慣れていません。今後はもっとうまくやれるように頑張ります。今回は、div のサイズの取得と設定の両方に成功することを願っています。

- 編集 -

以前の投稿のコード:

function getHeight(id)
{
    if(document.getElementById(id) == null) //simply a guard that returns 0 if a wrong ID is stated. In reality the return statement is enough.
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

function getWidth(id)
{
    return document.getElementById(id).offsetWidth;
}

-- 編集終了 --

  • モール
于 2013-09-02T14:06:49.303 に答える
0

サイズ変更可能なウィジェットの停止イベントを使用して高さを取得します-問題は、テキストを別の要素でラップする場合、テキストが別の要素でラップされないことです。そうでない場合、その要素をターゲットにすることができます。これをcssに使用します

#draggable {word-wrap:break-word;}

jsにこのようなものを使用します

$("#draggable").draggable().resizable({stop: function( event, ui ) {
        var tempHeight = $(this).css({"height" : "auto"}).height();
        $(this).css({"height" : "0px"}).animate({
        height : tempHeight
        },1000);
        }
     });

http://jsfiddle.net/j6FLa/26/

更新 フィドルを更新して、そこに追加の p 要素を追加し、p の最小の高さに設定しました。

http://jsfiddle.net/j6FLa/28/

html

<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style=""><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor asdfa asdfasdf asdf</p></div>

js

$(function () {
    $("#draggable").draggable().resizable({stop: function( event, ui ) {
        var pHeight = $(this).children('p').height();
        $(this).css('min-height', pHeight);
        }
     });
    $("#draggable").on( "dragstop", function( event, ui ) {alert('yes');} );
});
于 2013-08-06T15:43:40.170 に答える