1

我需要将具有自己的 css 值的跨度拖放到 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>-->

希望有人可以帮助

4

3 回答 3

2

如果样式只是在类中，请使用 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 函数内的可拖动元素。

于 2013-09-26T21:08:58.670 回答
0

你的 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") );
    }
 });
于 2013-09-26T21:15:19.470 回答
0

I'm not sure if there is a drop event you could listen for but you could probably simulate one with some logic and mouseup. The idea being, have your div listening for a drop, check the type of span that was dropped, and apply the right class to the div based on the dropped span.

Edit: I just pulled this outta my head, might not work exactly but that's part of the fun of coding. Seeing what works and what doesn't...

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');
        }
    }
});
于 2013-09-26T21:08:07.750 回答