2

タイトルで申し訳ありませんが、問題を適切に説明する方法がわかりませんでした。

コンテナに div を追加し、移動して配置できるようにしようとしています。このフィドルを見て、div (赤いものではなく、それをラップするもの) にカーソルを合わせると、[新しいコンテナー] ボタンをクリックしてコンテナーを追加できます。ただし、このコンテナーのサイズを変更すると、その下にある div がその上に飛び出します。

私は何か間違ったことをしていますか、それともこれは意図された機能ですか? オーバーラップしたくないので、新しい div を既存の div の上または下に配置するのが理想的です (ドラッグする場所に基づいて)。

編集：

問題を再現するには、赤いボックス (オンになっていない) の横にカーソルを合わせると、選択ボックスが表示されます。これが表示されたら 1 回クリックし、[新しいコンテナー] ボタンをクリックします。これにより、赤いボックスの上に div が追加されます。赤いボックスのサイズを変更しようとすると、赤い div が上に移動します。

編集2

「なぜ」これが起こっていることに気づきました。JQuery は、要素をサイズ変更時に絶対配置されるように変更するため、フロートの動作が停止します。これを取り除く方法はありますか？

HTML:

<div class="editable_content" style="padding:10px;">
    <div style="width: 100%; padding:10px; height: 400px;">
        <div style="width:100%; float:left; height:100px; background:red"></div>
    </div>
</div>

<input type="button" id="new_container" value="New Container" />

CSS:

.edit_mouse_on {
    background-color: #bcd5eb !important;
    outline: 2px solid #5166bb !important;
}
.edit_selected {
    outline: 2px solid red !important;
}

.ui-resizable-helper { border: 2px dotted #00F; }

JS:

var prevElement = null;
var selectedElement;
var enableHoverAction = true;
var allowedEditableClasses = "editable_content"
var hoverClass = "edit_mouse_on";
var selectedClass = "edit_selected";

document.addEventListener('mousemove', function (e) {
    var elem = e.target || e.srcElement;
    if (prevElement != null) detach(prevElement);
    attach(elem);
    prevElement = elem;
}, true);

function attach(obj) {
    if (enableHoverAction) {
        if (obj != null) {
            if ($(obj).parents("div.editable_content").length) {
                $(obj).addClass(hoverClass);
                $(obj).bind("click", function (e) {
                    e.preventDefault();
                    select(this);
                });
            }
        }
    }
}

function select(obj) {
    selectedElement = obj;
    enableHoverAction = false;
    $(obj).addClass(selectedClass);
    $(obj).removeClass(hoverClass);
}

function detach(obj) {
    if (enableHoverAction) {
        if (obj != null) {
            $(obj).removeClass(hoverClass);
            $(obj).unbind("click");
        }
    }
}

$(document).ready(function () {
    $("#new_container").click(function () {
        $("<div/>", {
            "style": "border:1px solid black; width:100px;height:100px; float:left;margin-bottom:1px;display:inline;clear:both",
            text: "",
        }).resizable({
            helper: "ui-resizable-helper"
        }).draggable({
            cursor: "crosshair",
            cursorAt: {
                top: 0,
                left: 0
            }
        }).prependTo(selectedElement);
    });
});
4

2 に答える 2

0

私の質問はある意味で重複しているようですが、投稿を削除するよりも役立つかもしれないと思うので、これを回答として投稿します（検索時に何も表示されなかったため）：

サイズ変更可能要素とドラッグ可能要素が互いに折りたたまれないようにするにはどうすればよいですか?

于 2013-03-21T21:22:39.850 に答える