在空排序中显示占位符文本与jQuery UI

是否有一个适当的非hacky的方式来添加一个空的排序占位符文本？我不是指在将项目拖到sortabel上时显示的占位符空白区域。我的意思是像“在这里放置物品”这样的文字。仅在列表为空时显示。在空排序中显示占位符文本与jQuery UI

我试图显示自己的占位符元素，但是我无法正确更新它的可见性，因为当我将连接的可拖动对象拖入可排序对象时，jQuery UI不会向我发送任何超出或超出事件。

出于某种原因，在本例中的代码over事件被触发。 out仍然没有。但在实际的代码中，我可以使用change而不是over。

编辑2：嗯，out事件是触发。但是在拖动元素从可排序列表中移除之前触发它。我通过以下方式解决了这个问题：

e.sortable({out: function() { 
    setTimeout(realOutHandler.bind(this), 0); 
}});

有没有更简单的方法来做到这一点？

来源

2012-06-14 panzi

你应该放弃一些示例的JavaScript到这个票。会让你更容易回答你的问题。 –

@NicholasDiPiazza我添加了一个jsfiddle的链接。但它当然不像我在真正的代码中那样。无论如何，我不想问“这里有什么问题”，我想问一下：有没有最佳做法来在空的排序中显示占位符文本？ – panzi

好了，明白了。代码示例有助于澄清您的问题。谢谢 –

使用over事件隐藏占位符文本，out事件显示它，并使用stop方法将其删除。

$("#sortable").sortable({ 
    revert: true, 
    over: function() { 
     $('.placeholder').hide(); 
    }, 
    out: function() { 
     $('.placeholder').show(); 
    }, 
    stop: function() { 
     $('.placeholder').remove(); 
    } 
}); 
$("#draggable").draggable({ 
    connectToSortable: "#sortable", 
    helper: "clone", 
    revert: "invalid" 
});

活生生的例子 - http://jsfiddle.net/JfGxy/2/

来源

2012-06-14 16:26:33

是的，出于某种原因，它从不像真实代码中的最小例子。无论如何，我设法修补一些东西（正如我所说的，使用out + setTimeout）。 – panzi

.placeholder来自哪里？ –

很好，谢谢！ –

SASS方式：

#sortable 
    &:empty { 
     padding: 0; 
     min-height: 50px; 
     z-index: 999; 
     margin-bottom: 10px; 
     margin-right: 25px; 
     border: 4px dashed #CCC; 
     background-color: #F5F5F5; 

     &:after { 
     color: #888; 
     content: "Drop items here"; 
     display: block; 
     min-height: inherit; 
     line-height: 50px; 
     text-align: center; 
     font-size: 18px; 
     font-weight: 700; 
    } 
}

来源

2016-11-24 16:08:11 max

在空排序中显示占位符文本与jQuery UI

回答

相关问题