Question

我已经使用jQuery实现了一个droppable，如下所示：

$( ".myVal" ).droppable({ drop: function( event, ui ) 
            { 

            } 
        });

我将<li>元素拖入可放置区域。我可以将新的css应用到刚删除时添加的<li>，那么文本是否包含新的CSS样式，而不仅仅是文本被放入该区域？

Answer 1

或者您可以（因为li将从新容器中对样式进行处理）

/*OnlyCss*/
    .myVal ul li{
        color:red;
        background:blue;
    }

没有必要使用jQuery，但是如果你仍然想要（但这只有在被删除的元素必须与其余部分不同时才有意义 - 在新容器中 - ）：

注意： 假设.draggable元素是 li

/*javascript*/
    $( ".myVal" ).droppable({ drop: function( event, ui ) 
            { 
                  ui.draggable.css({'color':'blue','background':'red'});
            } 
        });

甚至

/*javascript+css*/
    $( ".myVal" ).droppable({ drop: function( event, ui ) 
            { 
                 ui.draggable.addClass('justDropped');
            } 
        }); 
   /*combined with*/ 
    .justDropped{
        color:red;
        background:blue;
    }

Answer 2

$( ".myVal" ).droppable({ drop: function( event, ui ) 
        { 
              $(this).find("li").addClass("newClass");
        } 
    });

我认为这就是你所需要的。

所以：

<强> CSS

.myVal ul li{
    //styles
}

也是个好主意：）

Answer 3

查看http://jqueryui.com/demos/droppable/在事件下，有一个drop事件，您可以在删除元素后执行任何转换。

在放入可放置区域时更新<li>的css </li>

3 个答案: