Question

我想在div上拖动一个对象时改变div的颜色。

我希望它从红色变为绿色。

目前我的 script.js ：

function dragEnter()
{
    $('.dropbin').bind('dragenter', function(){
        $(this).addClass('drag-enter');
    });
}

在我的 general_notes.php （这是此处的主要显示页面）中：

$("#dropbin").droppable
({
  accept: '#dragme', 
  drop: function(event) 
  {
    $('#dragme').hide();
    if (confirm('Delete the note?'))
    {
      $.ajax({
        type: 'POST',
        url: 'deleteNote.php',
        success: function(result)
            {
                alert("Success");
            }
      })
    }
  }
});

这个 general_notes.php 包含一个名为 noteContent.php 的php文件，里面有这个jQuery：

$('#dragme').each(function() 
    {
      $(this).draggable(
      {
        revert: 'invalid'

      });
    });

    $("#dragme").data({'originalLeft': $("#dragme").css('left'),
                      'origionalTop': $("#dragme").css('top')
                     });

这是对函数的调用：

<div class="dropbin" id="dropbin" ondragenter="dragEnter(event)">
            <span class="fa fa-trash-o noSelect hover-cursor" style="font-size: 20pt; line-height: 225px;">&nbsp;</span>
          </div>

目前，除了＆＃34; dropbin＆＃34;元素不变为绿色它只是保持红色。如何使用我目前拥有的可拖动元素将此绿色转为绿色？

Answer 1

在脚本文件中使用以下代码段：

$(document).on('dragenter','.dropbin', function(){
    $(this).addClass('drag-enter');
});

PS：如果您只是使用它来添加课程，请不要将上述代码段保留在 dragEnter（）函数和 ondragenter =“dragEnter（event）”中。

Answer 2

让我们来看几件。

function dragEnter()
{
    $('.dropbin').bind('dragenter', function(){
        $(this).addClass('drag-enter');
    });
}

和

<div class="dropbin" id="dropbin" ondragenter="dragEnter(event)">

这段代码告诉我们的是当你拖到＆＃34; dropbin＆＃34;时，让我们点击dragEnter。而dragEnter将向dragenter事件注册一个函数。它不会被激发，因为事件已经被触发。试试这个

function dragEnter(event)
{
  $(event.target).addClass('drag-enter');
}

如何正确地将dragenter应用于元素

2 个答案: