当我将项目拖到可放置容器中时,我希望显示一个占位符,就像在 JQuery Sortable 中显示的占位符一样。
我们在 JQuery 可排序中有一个占位符选项。在 JQuery 可拖动方法中是否有类似的东西,或者无论如何我该怎么做。
任何建议都会有所帮助。
当我将项目拖到可放置容器中时,我希望显示一个占位符,就像在 JQuery Sortable 中显示的占位符一样。
我们在 JQuery 可排序中有一个占位符选项。在 JQuery 可拖动方法中是否有类似的东西,或者无论如何我该怎么做。
任何建议都会有所帮助。
试试下面的代码,
正如您所提到的,“容器将有很多元素”。我假设这些容器将具有“div”元素。
$("#container_drop div").droppable({
drop: function (event, ui) {
$( this ).addClass( "ui-state-highlight" );
},
over: function (event, ui) {
$( this ).addClass( "ui-state-highlight" );
},
out: function (event, ui) {
$( this ).removeClass( "ui-state-highlight" );
}
});
尝试打击代码,
$( "#container_drag" ).draggable({
drag: function() {
$('#container_drop').addClass('highlight_container');
},
stop: function() {
$('#container_drop').removeClass('highlight_container');
}
});
其中,container_drag - 您的可拖动容器和 container_drop - 项目将被丢弃的位置。
在 CSS 中,
.highlight_container{border:...,background:...}
假设您的父元素具有 ID,以下是我最近在工作中所做的一个项目中的一些代码,该代码对我有用:
$('#container').draggable({
start: function(event, ui) {
$('#' + ui.helper.context.id).addClass('active');
},
stop: function(event, ui) {
$('#' + ui.helper.context.id).removeClass('active');
}
})
即使没有 ID,您也可以使用它。希望这可以帮助 :)