3

OIは、テキストエリアでドラッグ可能なjQueryに簡単な問題があります。

textarea をドラッグ可能な div に挿入する必要がありますが、textarea の領域はドラッグ可能ではなく、境界線のみです! テキストエリアを無効にしようとしましたが、何もしません。編集可能ではなく、ドラッグ可能/サイズ変更可能なテキストエリアが必要です。

これは私のhtmlコードです:

<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
     <textarea disabled style=" width:98px; height:48px;">Some text</textarea>
</div>

私のjQueryコード:

                $('.drag-item').draggable({
                    snap        : true,
                    cursor      : "move",
                    delay       : 100,
                    scroll      : false,
                    containment : "parent",
                    stop: function (e, ui){
                       //some code
                    },
                    drag: function(e, ui){
                       //some code
                    }
                }).resizable({
                    containment : "parent",
                    stop: function(e, ui) {
                        var width = ui.size.width;
                        var height = ui.size.height;
                        var hereDrag = this;

                        if($(hereDrag).find('textarea').length > 0){
                            $(hereDrag).find('textarea').css('width', width - 10);
                            $(hereDrag).find('textarea').css('height', height - 10);
                        }
                    },
                    resize: function(e, ui){
                       //some code
                    }
                })

このテキストエリアを編集可能ではなく、境界線以外のすべての領域でドラッグおよびサイズ変更可能にするにはどうすればよいですか?

ありがとう

4

3 に答える 3

5

受け入れられた答えはこの特定の状況で機能しますが、その理由は単に間違っています。したがって、これがどのように機能するかを理解したい人のために：

jQuery UI draggablesオプションは、ドラッグ操作を開始できないcancel要素を指定する jQuery セレクターです。

APIによると、デフォルトはinput,textarea,button,select,optionです。

したがってtextarea、ドラッグ可能オブジェクト内でのドラッグを許可するために必要なのは、を含まないcancelオプションを指定することだけです。textarea

$('.drag-item').draggable({cancel: ''});

また

$('.drag-item').draggable({cancel: 'input,button,select,option,.undraggable'});

受け入れられた回答は に設定id="text"され、textareaに設定cancel: "text"されますdraggable。これが実際に意味することは、ドラッグ可能な<text></text>要素内の要素divはドラッグ操作をキャンセルしますが、ドラッグは他の要素 ( textarea. このid場合、属性はまったく関係ありません。

属性を持つ特定の要素でドラッグをキャンセルする(ドラッグを有効にしない)id="text"場合、オプションの正しい値cancelは jQuery selector になり#textます。

于 2014-10-19T07:57:18.680 に答える
1

デモ

これを試してください。id 属性をテキストエリアid="text"に追加し、属性cancel:"text,"をdraggable()

html

<div class="drag-item item-txt txt-static" id="1>" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
     <textarea disabled style=" width:98px; height:48px;" name="text" id="text">Some text</textarea>
</div>

コード

$(function () {
    $('.drag-item').draggable({
                    snap        : true,
                    cursor      : "move",
                    delay       : 100,
                    scroll      : false,
                    cancel: "text",
                    containment : "parent",
                   drag: function(e, ui){
                       //some code
                    }
                }).resizable({
                    containment : "parent",
                    stop: function(e, ui) {
                        var width = ui.size.width;
                        var height = ui.size.height;
                        var hereDrag = this;

                        if($(hereDrag).find('textarea').length > 0){
                            $(hereDrag).find('textarea').css('width', width - 10);
                            $(hereDrag).find('textarea').css('height', height - 10);
                        }
                    },
                    resize: function(e, ui){
                       //some code
                    }
                })

});

これが役に立てば幸いです、ありがとう

于 2013-08-25T09:41:37.213 に答える
0

やってみました ：

<div class="item-txt txt-static" id="1" style="position:absolute; width:100px; height:100px; top:50px; left:10px; z-index:50;">
     <textarea class="drag-item" disabled style="width:98px; height:48px;">Some text</textarea>
</div>

div のみにドラッグ可能なプロパティを指定したため、テキスト領域はドラッグできませんでした。

于 2013-08-25T09:36:27.983 に答える