0

jQueryには、jQuery-uiとuiテーマの1つ（私は軽さがとても好きです）が含まれています

（私に耐えてください、あなたが好きならスキップすることができる下部に質問があります、ちょうど私が私がどこにいるのかを示したかっただけです）

（コードに間違いやビットを見逃してしまった場合は申し訳ありませんが、動作しますが、読みやすくするためにコードを切り詰めていました）

私はjQuery-UIプロジェクトによって提供される標準のドラッグ可能+ソート可能から始めました：

// HTML
<div id="leftColumn">
<ul id="pageElements">
<li class="ui-state-default ui-corner-all" id="html">Html</li>
<li class="ui-state-default ui-corner-all" id="paragraph">Paragraph</li>
<li class="ui-state-default ui-corner-all" id="image">Image</li>
<li class="ui-state-default ui-corner-all" id="faq">FAQ</li>
</ul>
</div>

<div id="rightColumn">
    <ul id="pageItems"></ul>
</div>

// JavaScript Code
$("#pageItems").sortable({
    revert: true,
    placeholder: 'ui-state-highlight',
    tolerance: 'pointer'
});
$("#pageElements li").draggable({
    connectToSortable: '#pageItems',
    helper: 'clone',
    revert: 'invalid'
 });

次に、dblclick関数を追加して、ドラッグせずにアイテムをあるリストから別のリストに移動できるようにすると便利だと考え始めたので、次のように追加しました。

    $("#pageElements li").dblclick(function () {
        copythis(this);
    });

function copythis(elem) {
    var selected = $(elem).closest("li").clone();     
    $("#pageItems").append(selected).html();
}

それから私は大丈夫だと思いました、今私はpageItemをdblclickして編集のためのダイアログを表示したいと思います

だから私は追加しました：

<div id="itemDialog"></div> 


$("#itemDialog").dialog({ autoOpen: false, modal:true });
$("#pageItems li").live("dblclick", function () {
    openDialog(this);
});

function openDialog(elem) {
    $("#itemDialog").dialog('open');
}

次に、要素にカーソルを合わせて削除できるようにするためのボタンが必要だと思いました。そこにも編集ルートがあるとよいでしょう。

var removeButton = '<span class="buttons"><span class="ui-edit ui-state-default ui-corner-all ui-icon ui-icon-pencil" title="edit">Edit</span><span class="ui-remove ui-state-default ui-corner-all ui-icon ui-icon-closethick" title="remove">Remove</span></span>';

$("#pageItems li").live("mouseenter", function () { $(this).append(addButton); }).live("mouseleave", function () { $(this).find(".buttons").remove(); });

    $(".ui-remove").live("click", function () { $(this).closest("li").remove(); });

    $(".ui-edit").live("click", function () {
        openDialog(this);
    });

これで非常に機能的になり、pageElementに「追加」ボタンを追加したかったので、ドラッグ、dblclick、ボタンクリックの3つのオプションがあり、コードを追加します。

    var addButton = '<span class="buttons"><span class="ui-add ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-e" title="Add">Add</span></span>';

pageItem li "live hover"のコードを再度使用しました：

$("#pageElements li").live("mouseenter", function () { $(this).append(addButton); }).live("mouseleave", function () { $(this).find(".buttons").remove(); });

$(".ui-add").live("click", function () {
    copythis(this);
});

copythis関数を修正して、ボタンを含めることができるようにしました。

function copythis(elem) {
    var selected = $(elem).closest("li").clone();
    selected.find(".buttons").remove();
    $("#pageItems").append(selected).html();
}

そして、これは私が今いるところであり、私が現在取り組んでいる問題です。

pageElementをdblclickすると、要素がコピーされます（期待どおり）。

追加ボタンをクリックすると、新しい要素もコピーされます（予想どおり）。

pageElementdblclickイベントがpag​​eElementliタグに添付され、追加ボタンクリックイベントがその中にネストされたスパンタグ上にあるため、追加ボタンをすばやくクリックすると、dblclickイベントが発生することがあるため、複数の要素を追加します。 pageItemリスト。

私が探しているのは、ボタンの追加アイテムを囲むdblclickイベントのデッドゾーンを作成することです。

私はどんなアイデアにもオープンです。

乾杯

ルーク

4

2 に答える 2

0

私はそれが役に立たないことを知っていますが、dblclickを聞くことはお勧めしません-それはa）異なるクライアントで異なる働きをします-そしてjqueryはそれのすべてをマスクしませんb）あなたはあなたのユーザーにダブルクリックさせたくないです、それは複雑です。

于 2010-07-28T12:46:51.873 に答える
0

OK、それで私は答えを見つけました、おそらく最良ではありませんが、それはうまくいきます。

これには、グローバル変数の定義が含まれます。

var clicked = 0;

次に、ui-addのライブイベントで、値を1に設定してから、タイムアウトを設定して、値のリセットを0に遅らせます。

    $(".ui-add").live("click", function () {
        clicked = 1;
        copythis(this);
        setTimeout(function () { clicked = 0;}, 100);
    });

それで、私のpageElement dblclick関数で：

    $("#pageElements li").dblclick(function () {
        if (clicked == 0) {
            copythis(this);
        }
    });

理想的ではありませんが、機能します。

于 2010-07-28T13:31:46.990 に答える