0

プロジェクトでいくつかのドラッグ アンド ドロップ機能を実行するためにGridster.jsを使用しようとしています。

順序付けられていないリストを使用する代わりに、ウィジェットにフォームとボタンを含む一連の div を使用しています。

私の問題は、最初の列をドラッグできず、ウィジェットをどこにもドロップできないことです。彼らは元の場所に戻るだけです

これが私のレイアウトです：

<div class="gridster">
     <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>
     <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
                <button>//button stuff here </button>
          </form>
     </div>

... ETC
</div>

そして、これが私のjsです。これはドキュメントの準備ができています

var gridster = $('.gridster').gridster({
            widget_margins: [5,5],
            widget_selector: '.dragMe',
            widget_base_dimensions: [264, 103],
            max_cols: 5,
            max_rows: 5,
            resize: {
                enable: true
            },
            draggable: {
                start: function(event, ui) {
                    dragged = 1;
                },
                stop: function(event, ui){
                    var id = this.$helper[0].attributes[0].value;
                    var row = this.$helper[0].attributes[1].value;
                    var col = this.$helper[0].attributes[2].value;
                    console.log(id, row, col);
                }, 
                items: '.dragMe',
                limit: true
            }
        }).data('gridster');

grister.js と css ファイルの両方があります。改善のための提案はありますか？

4

2 に答える 2

1

Gridster には、要素の下に 1 つの要素 ( or など) が必要だと思いますdiv。ul<div class="gridster">

<div class="gridster">
     <div class="gridster-container">
         <div class="dragMe" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>
         <div class="dragMe" data-row="2" data-col="2" data-sizex="1" data-sizey="1">
          <form>
            <button>//button stuff here </button>
          </form>
         </div>

    ... ETC
     </div>
</div>

そして JavaScript:

var gridster = $(".gridster div.gridster-container").gridster({...

また、彼らがウェブサイトで使用しているようにul使用することもできます。li

于 2014-04-01T10:36:12.383 に答える
0

あなたのコードには、それを台無しにしている何か他のものがあると思います。このjsfiddleを確認してください。コードをコピーして貼り付け、追加しただけです:

.dragMe {
    background-color:#0f0;
}
.preview-holder {
    background-color:#000!important;
}

ウィジェットが見えるように色を付けるだけです。それ以外に変更したのは、ボタンのテキストと「...ETC」だけです。ボタンでドラッグしようとしてもドラッグしませんが、ウィジェットのどこからでもドラッグできます。

なんらかの理由でボタンをドラッグする必要がある場合は、それを非入力/ボタン要素に変更し、必要な機能を JavaScript でシミュレートすることをお勧めします。

グリッドで問題が発生した場合、次のことを確認します。

  • 開始/終了タグがすべて一致

  • データ属性は理にかなっています（ウィジェットが重なるとGridsterはおかしくなります）

  • スタイルが適切に適用されています - あなたが考えているように見えることを確認してください.

    JavaScript に問題があるとは思わなかったので、1 つのことを期待していたことが何度かありましたが、CSS スタイルがありませんでした。

于 2014-03-24T04:10:09.083 に答える