作为我正在进行的 UI 实验的一部分,我已经将拖放搜索组合在一起。
到目前为止,我有这个:
http://jsfiddle.net/craigie2204/pJDPQ/20/
当您拖动天气按钮时,它只会显示下雨。我的问题是:
例如,这可以是一个附加过程吗?用户删除显示下雨的天气,然后在星期二下降一天。那么表格能否显示周二下雨的所有搜索结果?如果是这样,您能否提供有关如何实现这一目标的任何参考。
我还尝试在函数上设置时间间隔,以检查可放置的 div 是否具有类。这样一来,如果用户删除了可拖动项目,则与此 div 关联的字符串将从搜索中删除。这似乎行不通,任何人都可以向我指出如何做到这一点(如果可以的话)。
与往常一样,如果您想弄乱 JSfiddle,请成为我的客人。
PS。如上所述,代码有点杂乱无章,因为我只是把我在网上找到的一些代码放在一起以获得所需的用户体验,所以提前抱歉。
多谢你们,
克雷格
$(function () {
var $result = $('.result');
$('.drag').draggable({
});
$('.drop').droppable({
drop: function (e, ui) {
outputResult(ui.draggable);
}
});
setInterval (outputResult(elm), 100);
function outputResult(elm) {
if ($(elm).hasClass('oweatherType')) {
searchTable("rain");
} else if ($(elm).hasClass('oday')) {
searchTable("Tuesday");
} else if ($(elm).hasClass('olocation')) {
searchTable("Scotland");
}
}
});
function searchTable(weatherSelect) {
var table = $('#tblData');
table.find('tr').each(function (index, row) {
var allCells = $(row).find('td');
if (allCells.length > 0) {
var found = false;
allCells.each(function (index, td) {
var regExp = new RegExp(weatherSelect, 'i');
if (regExp.test($(td).text())) {
found = true;
return false;
}
});
if (found === true) $(row).show();
else $(row).hide();
}
});
}