4

ドラッグ アンド ドロップには jquery-ui の draggable を使用し、インライン編集にはjeditableを使用しています。

編集可能な要素をドラッグ アンド ドロップすると、ドロップされた直後に jeditable が起動して「編集モード」になります。

この動作を無効にするにはどうすればよいですか?

編集- ネットスティングが原因で問題が発生します -この例を参照してください。また、例をより現実的なものにするために、ミックスにドラッグ可能を追加しました (実際の実際の問題は、私が取り組んでいるこのサイトにあります)。

注- 報奨金のルールにより、この質問には受け入れられた回答がありますが、問題はまだ解決されていません。

4

5 に答える 5

5

更新 2: children() を使用

デモ 2: http://jsbin.com/izaje3/2

あなたのコメントに応えて

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).children('div').removeClass('editable')
        },
        stop: function(event, ui) {
           $(this).children('div').addClass('editable')
        }
    });
});​

デモ: http://jsbin.com/ihojo/2

$(function() {
    $(".draggable").draggable({
        drag: function(event, ui) {
            $(this).unbind('editable')
        }
    });
    $(".editable").editable();
});

または、次のようにすることもできます。

$(function() {
    $('.editable').editable();
    $('.draggable').draggable({
        drag: function(event, ui) {
            $(this).removeClass('editable')
        },
        stop: function(event, ui) {
            $(this).addClass('editable')
        }
    });
});

次のようなものがあるとします。

<div class="draggable editable"></div>

注:念のため、handle メソッドを使用して利用することもできます。

http://jqueryui.com/demos/draggable/#handle

于 2010-06-01T21:23:15.097 に答える
3

今日、この正確な問題 (jQuery UI Draggable 内にネストされた jEditable) に遭遇したため、この投稿を見つけました。私の解決策が特にエレガントだとは思いませんが、他の誰かが同じ問題を抱えている場合に備えて共有する必要があると感じました.

ドラッグ イベントで jEditable のバインドを解除して再初期化しようとする代わりに (stop() での再初期化後にクリック イベントが発生するようです)、jEditable を設定して、マウスアップ時にのみトリガーされるカスタム イベントを使用する方が簡単であることがわかりました。ドラッガブルはドラッグされませんでした (クリックをシミュレートします)。

editable の最初の引数としての匿名関数は、それがあなたのものである場合、投稿先の URL に置き換える必要があります。

http://jsbin.com/izaje3/13

var notdragged = true;
$('.editable').editable(function(value, settings) {
        return value;
    }, {event : 'custom_event'
});
$('.draggable').draggable({
    start: function(event, ui) {
        notdragged = false;
    }
});

$('.editable').bind('mousedown', function() {
    notdragged = true;
}).bind('mouseup', function() {
    if (notdragged) {
        $(this).trigger("custom_event");
    }
});
于 2011-09-05T06:39:17.897 に答える
0

リッパー、

考えられる回避策の1つは、jEditableコンポーネントにダブルクリックイベントを使用することです。

これを行うには、次のオプションを使用してjEditableオブジェクトを初期化します。

event: 'dblclick'
于 2010-05-28T14:21:48.080 に答える
0

Event多くの場合、ドロップハンドラー内でオブジェクトを取得してから、、またはを呼び出す必要がありますevent.preventDefault()。event.stopImmediatePropagation()event.stopPropagation()

幸いなことに、jQueryを使用しています。バニラJSとクロスブラウザでそうするのは面倒です。

于 2010-04-30T11:01:38.443 に答える
0

これらのアイテムに contenteditable="false" を設定してみてください。関連する html タグにこの属性を追加してみて、何が起こったかを確認してください。

于 2010-09-03T09:25:23.107 に答える