5

現在、画面をクリックすると、サイズ変更可能な要素が動的に作成されます。mousedown

jQuery UI は自動的にハンドルを追加し、ユーザーがクリック アンド ドラッグして後で要素のサイズを変更できるようにします。

mouseupユーザーがトリガーしていない限り、新しく作成された要素のサイズを変更しているように、ハンドルをトリガーしたいと思います。

これらのハンドルをクリックしたときにどのイベントがトリガーされるかを示すドキュメントは見つかりません。要素が作成され、画面に配置され、として設定された後、ハンドルでmousedownandを実行しようとしました。これらのどちらも機能しませんでした。clickresizable

サイズ変更アクションの開始をトリガーする方法を知っている人はいますか? または、jQuery UI イベントを記録する方法を誰かが知っている場合は、それを使用して、ハンドルがクリックされたときに発生するアクションを表示し、同じパスをたどって、結果をここに投稿できます。

4

2 に答える 2

6

Michael Lからの回答のフィドルは、基本事項をカバーしていますが、まだいくつかのバグ/制限が含まれています。したがって、ここに修正版を回答として追加しています。

HTML

<div id='container'></div>

CSS

#container {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: #eee;
}

.block {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: red;
    opacity: 0.2;
}

JavaScript

$("#container").on("mousedown", function(event){
    if (event.target !== this) {
        return;
    }
    var $target = $(event.target),
        $block = $("<div />")
            .addClass("block")
            .css({
                top: event.pageY - $target.offset().top,
                left: event.pageX - $target.offset().left
            })
            .resizable()
            .draggable({ containment: $target });
    $target.append($block);
    simulateHandleEvent($block, "se", event);
})

function simulateHandleEvent($item, handle, event){
    $item.find(".ui-resizable-" + handle)
        .trigger("mouseover")
        .trigger({
            type: "mousedown", 
            which: 1,
            pageX: event.pageX,
            pageY: event.pageY
    });
}

このJSFiddleをチェックしてください

于 2013-11-04T12:48:36.667 に答える
3

私は同じ問題を抱えていて、最終的に答えを見つけました。関数に追加情報を渡す必要がありtrigger()ます。JS フィドルを参照してください。

于 2013-04-08T04:00:46.977 に答える