Question

我需要将带有自己的css值的跨度放入div中，在div上将div取下掉落跨度的css值。这是我的代码，但我需要这样做，所以无论跨度下降，div都将采用该值。

这是我的HTML

$(document).ready(function() {
  $('.drag1, .drag2, .drag3').draggable({ containment: 'document', revert: true });
  $('#drop').droppable({ hoverClass: 'border, bgRed', tolerance: 'pointer', accept: '.drag1, .drag2, .drag3' });
});

.drag1 {
  background-color: #900;
  padding: 4px 10px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #FFF;
}

.drag2 {
  background-color: #036;
  padding: 4px 10px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #FFF;
}

.drag3 {
  background-color: #060;
  padding: 4px 10px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #FFF;
}

.border {
  border: dotted 1px #999999;	
}

.bgRed {
  background-color:#900;	
}
#drop {
  height: 200px;
  width: 200px;
  padding: 10px;
  margin-top: 10px;
}

<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<span class="drag1" title="Drag Me">Red Header</span>
<span class="drag2" title="Drag Me">Blue Header</span>
<span class="drag3" title="Drag Me">Black Header</span>

<div id="drop"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<!--<script src="js/ui.js"></script>-->

希望有人可以提供帮助

Answer 1

如果样式只在类中，请使用drop事件执行某些操作：

$('#drop').droppable({ 
    hoverClass: 'border, bgRed', 
    tolerance: 'pointer', 
    accept: '.drag1, .drag2, .drag3',
    drop: function (ui, event) {
        $(this).addClass($(ui.draggable).attr('class'));
    } 
});

你可以做任何你想做的事。 'this'是drop元素，'ui.draggable'是drop函数中的可拖动元素。

Answer 2

我不确定是否有可以监听的丢弃事件，但你可能会用一些逻辑和鼠标模拟一个。这个想法是，让你的div监听掉线，检查掉落的跨度类型，并根据丢弃的跨度将正确的类应用于div。

编辑：我只是把它拉出了我的脑袋，可能无法正常工作，但这是编码乐趣的一部分。看什么有效，什么无效...

var objToDrop = $('#div');

objToDrop.on(mouseover, function()
{
    objToDrop.on(mouseup), function() 
    {
        if(objToDrop.children().attr('class') === 'class1')
        {
            objToDrop.addClass('class1');
        }
        else if(objToDrop.children().attr('class') === 'class2')
        {
            objToDrop.addClass('class2');
        }
        else if(objToDrop.children().attr('class') === 'class3')
        {
            objToDrop.addClass('class3');
        }
    }
});

Answer 3

你的droppable有一个drop事件

$('#drop').droppable({
    accept: '.drag1, .drag2, .drag3',
    drop: function (event, ui) {
                    //$(this) is your #drop 
                    // ui.draggable is your draggable object
                    //the next line removes any previous class and adds the class of your draggable to your droppable 
        $(this).attr("class", "").addClass( $(ui.draggable).attr("class") );
    }
 });

在droppable下降时更改css值

3 个答案: