2016-10-01 9 views
1

http://jsfiddle.net/wfG3L/554/で素敵なスクリプトが見つかりました。それはドラッグについてです&ドロップ。特定のdivにドロップした後にドラッグ&ドロップのスタイルを変更

クラス.cardの幅や高さを.stackDrop1または.stackDrop2にドロップして#launchPadにドロップした後に戻したい場合は、これを変更したいと思います。

誰でも手伝ってもらえますか?とても感謝しております。

$("#launchPad").height($(window).height() - 20); 
var dropSpace = $(window).width() - $("#launchPad").width(); 
$("#dropZone").width(dropSpace - 10); 
$("#dropZone").height($("#launchPad").height()); 

$(".card").draggable({ 
    appendTo: "body", 
    cursor: "move", 
    helper: 'clone', 
    revert: "invalid", 
}); 

$("#launchPad").droppable({ 
    tolerance: "intersect", 
    accept: ".card", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) { 
     $("#launchPad").append($(ui.draggable)); 
    } 
}); 

$(".stackDrop1").droppable({ 
    tolerance: "intersect", 
    accept: ".card", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) {   
     $(this).append($(ui.draggable)); 

    } 
}); 

$(".stackDrop2").droppable({ 
    tolerance: "intersect", 
    accept: ".card", 
    activeClass: "ui-state-default", 
    hoverClass: "ui-state-hover", 
    drop: function(event, ui) {   
     $(this).append($(ui.draggable)); 
    } 
}); 

答えて

1

このCSSを試してみてください:

.stack .card.ui-draggable 
{ 
    background-color:orange; 
} 
+0

はありがとうございました!!私はその2時間で苦労した:D .. –

関連する問題