將文本移動到另一個 div 時如何更改文本的顏色

Question

我希望通過在放置字段中更改其顏色來使可拖動元素更具交互性。 但我還沒有想出如何用當前的代碼來做到這一點。

這是我的 HTML：

<!-- Begin draggable area -->
            <div class="draggable">
                <div class="row">
                    <div class="col-md-12">
                        <h2 class="window-title">Spectra</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="draggable-spectra">   <!--draggable element-->
                      <h3>Menu</h3>
                      <p class= "element">dasdsa</p>
                    </div>
                    <div class="draggable-spectra"><h3>Content</h3></div>  <!--draggable element-->
                </div>
             </div>
<!-- End draggable -->

            <!-- Begin Drop Area -->
            <div class="droppable-spectra">
                <h2 id="drop">Drop-box</h2>
            </div>
            <!-- end Drop Area -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="assets/js/drag.js"></script>  <!--js file where I have the code below-->

這是我的 JS 代碼（感謝 aSeptik）：

$(function() {
$(".draggable-spectra").draggable({
    revert : function(event, ui) {
        // on older version of jQuery use "draggable"
        // $(this).data("draggable")
        // on 2.x versions of jQuery use "ui-draggable"
        // $(this).data("ui-draggable")
        $(this).data("uiDraggable").originalPosition = {
            top : 0,
            left : 0
        };

        // if (event === false){
        //   $(".element").data("color","blue")
        // };
        // return boolean
        return !event;
        // that evaluate like this:
        // return event !== false ? false : true;
    }
});
$(".droppable-spectra").droppable();});

現在它是這樣工作的（它是來自 aSeptik 的一個例子）： http ://so.devilmaycode.it/revert-a-jquery-draggable-object-back-to-its-original-container-on-out-event- 的-d/

但是當它被放置在可放置的框中時，我怎么能改變可拖動框中的文本顏色呢？ 我試過 .data() 但它沒有用。 任何建議將不勝感激。 謝謝！

Answer 1

$('#element').droppable({
    drop: callback,
    greedy: true
});

我認為你需要實現這樣的東西。

http://api.jqueryui.com/droppable/

Answer 2

您可以使用 droppable 小部件的drop事件回調，如下所示：

 $(".draggable-spectra").draggable(); $(".droppable-spectra").droppable({ drop: function(e, ui) { ui.draggable.css('color', 'blue'); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <!-- Begin draggable area --> <div class="draggable"> <div class="row"> <div class="col-md-12"> <h2 class="window-title">Spectra</h2> </div> </div> <div class="row"> <div class="draggable-spectra"> <!--draggable element--> <h3>Menu</h3> <p class="element">dasdsa</p> </div> <div class="draggable-spectra"> <h3>Content</h3> </div> <!--draggable element--> </div> </div> <!-- End draggable --> <!-- Begin Drop Area --> <div class="droppable-spectra"> <h2 id="drop">Drop-box</h2> </div> <!-- end Drop Area -->