jquery - ドラッグ可能なものをグリッドスターにドロップする方法

Question

ドラッグ可能な要素をグリッドスターにドロップできるかどうか誰かが知っていますか？ http://gridster.net/#documentation

私の目的には素晴らしいようですが、ドロップしてグリッドに追加できますか？

画像をグリッドスターにドラッグしたい。可能ですか？これのサンプルを見ることができますか？

これが不可能な場合、代替案を知っていますか？

画像をdiv内の個別の場所にドラッグして、位置を保存したり、キャンバス内で画像を移動したりできるようにする必要があります。

Answer 1

あなたは間違いなくそれを行うことができます。ドラッグ可能要素とドロップ可能要素を宣言するだけです。このjsfiddleはあなたにアイデアを与えるでしょう。

 $(".gridster ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [50, 50]
});

var gridster = $(".gridster ul").gridster().data('gridster');
$("#draggable").draggable();
$(".gridster ").droppable({
    drop: function (event, ui) {
        $("#draggable").removeAttr("style");
        gridster.add_widget(
       '<li class="new">
           <img src="http://www.sparity.com/images/facebookIcon.jpg" alt="facebook"> 
        </li>', 1, 1);

    }
});