将文本移动到另一个 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-of-d/

但是当它被放置在可拖放框中时，如何更改可拖动框中的文本颜色？我试过 .data() 但它没有用。任何建议将不胜感激。谢谢！

Answer 1

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

我认为你需要实现这样的东西。

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

Answer 2

您可以使用droppable widget的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 -->