我拥有的:
我有一个可拖动的div,还原参数设置为“无效”。
我需要的:
当恢复发生时,我想触发CSS更改为另一个元素。
问题:
“还原”是参数而不是一个事件,所以在恢复发生时我遇到很大的困难才能触发所需的CSS更改。
我的代码:
$('#peg_icon').draggable({ revert: 'invalid',scroll: false,stack: "#peg_icon",drag: function(event,ui) { $('#peg_icon').css('background-image','url(images/peg-icon-when-dragged.png)'); } });
我试过的
我没有成功尝试使用“还原”作为事件:
revert: function(event,ui) { $('#peg_icon').css('background-image','url(images/peg-icon-default.png)'); },
我也没有成功地尝试让恢复参数来执行此功能:
function(socketObj) { //if false then no socket object drop occurred. if(socketObj === false) { //revert the peg by returning true $('#peg_icon').css('background-image','url(images/peg-icon-default.png)'); return true; } else { //return false so that the peg does not revert return false; } }
语境:
我拖动一个div,当拖动时,背景图像发生变化,当拖动恢复时,背景图像将恢复到原始状态。
我的问题:
当拖动时发生恢复时,如何触发CSS更改为另一个元素?
解决方法
事实证明,还原可以接受一种方法。看到这个完整的例子:
http://jsfiddle.net/mori57/Xpscw/
http://jsfiddle.net/mori57/Xpscw/
特别:
$(function() { $("#ducky").draggable({ revert: function(is_valid_drop){ console.log("is_valid_drop = " + is_valid_drop); // when you're done,you need to remove the "dragging" class // and yes,I'm sure this can be refactored better,but I'm // out of time for today! :) if(!is_valid_drop){ console.log("revert triggered"); $(".pond").addClass("green"); $(this).removeClass("inmotion"); return true; } else { $(".pond").removeClass("green"); $(this).removeClass("inmotion"); } },drag: function(){ // as you drag,add your "dragging" class,like so: $(this).addClass("inmotion"); } }); $("#boat").droppable({ drop: function( event,ui ) { $(this) .addClass("ui-state-highlight"); } }); });
希望这有帮助…我猜测,无论您尝试修改是什么问题,而不是使用函数调用恢复的尝试。再看看你试图设置什么CSS,看看你的问题是否在那里。