2016-05-18 4 views
0

長時間リーダー、初回ポスター。私はJQueryでドラッグ&ドロップのWebページを作成しています。ドラッグ可能なdivがドロップ可能なdivにドロップされると、ドラッグ可能なdivのクラスが変更されただけでなく、ドラッグテーブル内の子divの名前が別のクラスに変更されていますか?ドラッグ可能な親divの子/子divを別のクラスに変更するにはどうすればよいですか?

HTMLはbasically-ある

<div class="dropbox"></div> 

し、このためのjQueryのスクリプトは、その後ドロップ可能セクションが後でscript-

でとてもように呼ばれて

<script type='text/javascript'>//<![CDATA[ 
$(function(){ 
$("#draggable").draggable({ 
drag: function(event, ui) { 
    $(this).removeClass('dropClass'); 
    } 
}); 

IS-

$(".dropbox").droppable({ 
tolerance: 'intersect', 
over: function(event, ui) { 
    $('.ui-draggable-dragging').addClass('hoverClass'); 
}, 
out: function(event, ui) { 
    $('.ui-draggable-dragging').removeClass('hoverClass'); 
}, 
drop: function(event, ui) { 
    $('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass'); 
} 
}); 

私は最初のセクションでは、の一部となっている「ドラッグ可能」クラスを作成することを実現

$('.indicator').removeClass('hoverClass').addClass('setOn'); 

を含むように機能イベント:ドラッグ可能の子divがあり、ドロップを追加する方法を「指標」と呼ばれるクラスを持っています"ui-draggable-dragging" drop:関数が実行されたときに呼び出せるイベントがない別のクラスの "インジケータ"をトリガする方法はありますか?

これは理にかなっていると思いますが、私はこれ以外のところでこの回答を見つけることはできませんでした。

答えて

0

。これがお手伝いします

$("#draggable").draggable({ 
    drag: function(event, ui) { 
     $(this).removeClass('dropClass'); 
     $(this).children('.indicator').removeClass('setOn'); 
    } 
}); 



$(".dropbox").droppable({ 
    tolerance: 'intersect', 
    over: function(event, ui) { 
     $('.ui-draggable-dragging').addClass('hoverClass'); 
    }, 
    out: function(event, ui) { 
     $('.ui-draggable-dragging').removeClass('hoverClass'); 
    }, 
    drop: function(event, ui) { 
     $('.ui-draggable-dragging').removeClass('hoverClass').addClass('dropClass'); 
     $('.ui-draggable-dragging').children('.indicator').addClass('setOn'); 
    } 
}); 

ホープ..このJavaScriptを試してみてください

関連する問題