0

私はこのhtmlを持っています:

<div class="content vertical-gradient">
    <div id="button_id0" class="button services rounded-corners trans-effect"><a class="title-text" href="index.php?services">Tjänster</a></div>
    <div id="button_id1" class="button prices rounded-corners trans-effect"><a class="title-text" href="index.php?prices">Priser</a></div>
    <div id="button_id2" class="button about-me rounded-corners trans-effect"><a class="title-text" href="index.php?aboutme">Om mig</a></div>
</div>

dom が読み込まれたら、次のように各ボタンからテキスト (html) を保存します。

$(".button").each(function(index) {            
       //Store all texts (html) from buttons for later user with drag/drop       
       lastHtml[index] = $(this).html();            
}

wherelastHtmlはグローバル配列として定義されています。

場合によっては、ボタンの html を変更したいのですが、どこかにドラッグ アンド ドロップしたときに、元の状態に戻したいと考えています。したがって、DOM が変数 lastHtml-array にロードされるときに、texts(html) を保存します。

ドロップ セクションでは、ボタンのインデックスを ID で取得します (インデックス番号は要素ボタン (useButtonId') によって取得されます。例: button_id1 はインデックス 1 を返し、button_id2 はドロップ時に index2 を返します)。

$( ".content").droppable({
    accept: ".button.dragme", //Must come from this dragged element
    drop: function( event, ui ) {                                                           
        //Show ordinary text for button                     
        var id = $(ui.helper).prop("id");
        var idArray = id.split("_id");                  //array of split between _id, example: [0] = button, [1] = 2                        
        var useButtonId = idArray[1]; 
        $(ui.helper).addClass("trans-effect").removeClass("dragme").removeClass("ui-draggable").html(lastHtml[useButtonId]);
    }   
}

しかし、私が本当に欲しいのは次のようなものです: (IDを考慮せずに好きなボタンをいくつも持ちたいのですが、DOMがロードされて元の状態に復元されたときにすべてのhtml値を保存したい特定のボタンをドラッグ アンド ドロップしたときの状態)。

<div class="content vertical-gradient">
    <div name="button[]" class="button services rounded-corners trans-effect"><a class="title-text" href="index.php?services">Tjänster</a></div>
    <div name="button[]" class="button prices rounded-corners trans-effect"><a class="title-text" href="index.php?prices">Priser</a></div>
    <div name="button[]" class="button about-me rounded-corners trans-effect"><a class="title-text" href="index.php?aboutme">Om mig</a></div>
</div>

おもう！？を使用できますindex()が、方法がわかりません。私は試してみました：

$(ui.helper).index())
$('.content').index(ui.helper))

しかし、どちらも正しいインデックスを返していないようです。

4

1 に答える 1

1

を使用して要素自体にhtmlを保存する方が簡単かもしれません.data()

var $btns=$('.button')
$btns.each(function(){
  var $btn=$(this);
  $btn.data('lastHtml', $btn.html());
});

data()ゲッターとセッターの両方であるため、リセットするには：

$(this).html( $(this).data('lasthtml') );

btn-indexまたは、格納された配列を参照するような属性またはデータ ストアを作成します。

$btns.each(function(index) {            
       //Store all texts (html) from buttons for later user with drag/drop       
       lastHtml[index] = $(this).html(); 
       $(this).attr('btn-index',index)/* or*/.data('btn-index',index);           
});

ドロップ可能な例でのみ使用する場合、要素に保存するのが最も簡単な方法のようです

于 2013-11-10T07:57:51.263 に答える