Question

我正在尝试这样做：当你将粉红色的盒子拖到掉落区域时，粉红色的盒子会变成蓝色。

在jquery中添加一个类或css。

代码到目前为止。因此'''是粉红色的，我希望在预览中删除一个类

$('.page').click(function(){
        $(this).draggable({
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            cursor: "move"  
        });
    });

    $(".preview").droppable();

Answer 1

在droppable.drop函数的回调中执行以下操作：

$(ui.draggable).removeClass("pink").addClass("blue");

完整代码：

CSS

.pink {
    background: pink;
}

.blue {
    background: blue;
}

的Javascript

$(function () {
      $("#draggable").draggable();
      $("#droppable").droppable({
          drop: function (event, ui) {
              $(ui.draggable).removeClass("pink").addClass("blue");
          }
      });
  });

示例：http://jsfiddle.net/vQs2L/1/

Answer 2

以下是方向的一些示例

function init() {
  $('#mydraggable').draggable();
  $('#mydroppable').droppable( {
    drop: handleDropEvent
  } );
}

function handleDropEvent( event, ui ) {
   if(/*check that the dropped element is pink*/) {
  // $yourpinkbox.addClass("blueclass");
}

}

jquery拖放添加类

2 个答案: