相关疑难解决方法(0)

我有一个可拖动的项目,如果没有丢弃在一个droppable将恢复.这很有效,直到用户在droppable中删除项目.如果他们认为他们在任何时候犯了一个错误他们将拖拽拉出来就会恢复到掉落状态.我希望在out和停用draggable回到原来的容器.

我的代码如下,但我在jsFiddle上提供了一个示例.

HTML

<div id="origin">
    <div id="draggable" class="ui-widget-content">
        <p>I revert when I'm not dropped</p>
    </div>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Drop me here</p>
</div>

JavaScript的

$(function() {
    $("#draggable").draggable({ 
        revert:  function(dropped) {
           var dropped = dropped && dropped[0].id == "droppable";
           if(!dropped) alert("I'm reverting!");
           return !dropped;
        } 
    }).each(function() {
        var top = $(this).position().top;
        var left = $(this).position().left;
        $(this).data('orgTop', top);
        $(this).data('orgLeft', left);
    });

    $("#droppable").droppable({
        activeClass: 'ui-state-hover',
        hoverClass: 'ui-state-active',
        drop: function(event, ui) {
            $(this).addClass('ui-state-highlight').find('p').html('Dropped!');
        },
        out: function(event, ui) {
                // doesn't …

$("div.date")
    .contents()
    .filter(
        function(){
            return this.nodeType != 1; 
        })
    .wrap("<span/>");

我是新手,并认为代码可以完成这个技巧,但它包装了所有内容,<span>所以:

<div class='date'><span>2011年12月22日</span></div>

它应该看起来像这样:

<div class='date'>
  <span>Dec</span>
  <span>22,</span>
  <span>2011</span>
</div>