1

ドロップされた要素を親コンテナ内でドラッグおよびサイズ変更できるようにしようとしています。

これが私のCSSです：

.toolitem {padding:5px 10px;background:#ececec;border:1px solid silver}.labelitem {width:114px;padding:10px 5px;color:#222;background:#fff;border:1px solid silver}

これが私のhtmlです：

<header>
 <ul>
     <li><div id="atool" class="toolitem droppable">A</div></li>
     <li><div id="btool" class="toolitem droppable">B</div></li>
 </ul>
 <div class="clear"></div></header><section id="container"/>

これが私のJSです：

$(".toolitem").draggable({
    opacity:1,
    tolerance:'fit',
    helper:'clone'
});
$("#container").droppable({
    accept:'.droppable',
    drop: function (event, ui) {
        // Check for new or already dropped element
        var dropped = ui.draggable.data("dropped");
        if (dropped == null && dropped != "1") {
            // Create new element only once
            var label = $('<div class="labelitem droppable">[Label]</div>');
            // Set flag as dropped
            label.data("dropped", "1");
            // Make new element draggable within parent
            label.draggable({ containment: 'parent', grid: [2, 2], helper: 'original' });
            // Make new element resizable within parent
            label.resizable({ containment: 'parent' });
            // Append new element to parent
            label.appendTo(this);
        }
    }
});

ドロップされたdivのサイズを変更できないことを除いて、上記のコードは適切に実行されます。助けてください。

4

1 に答える 1

1

私はそれを自分で解決しました。1時間グーグルした後、次のインクルードが欠落していることがわかりました

<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />

div のスタイルのサイズ変更に必要でした。すべてが期待どおりに機能するようになりました。しかし、奇妙なことに、jQueryUI のドキュメントで言及されていないか、見逃していました。

于 2012-07-10T22:44:35.510 に答える