我在Jquery中遇到问题,下面是我的HTML代码
<div id="frame" style="height:100;width:100;" >
<img alt="" id="Img1" runat="server" src="~/Images/pdfcar.png"
style="height:30px;width:30px;"/>
以下代码工作正常,
Javascript:Jquery rotate
var test = 5;
$(function() {
$('#Img1').live('mousedown', function(event) {
test = test + 15;
**$('#Img1').rotate({ angle: test });**
});
});
但我的方案是实现丢弃图像的旋转,当我尝试下面的代码时它无法正常工作
var test = 5;
$(function() {
$('#frame img').live('mousedown', function(event) {
test = test + 15;
**$('#frame img').rotate({ angle: test });**
});
});
上面的代码有什么问题或者如何实现它?
完整的JQuery代码
var counter = 1;
$(function() {
$('#frame img').live('click', function(event) {
if ((counter > 0) && (counter < 350)) {
$(this).rotate(counter + 45);
counter = counter + 45;
}
else if ((counter > -1) && (counter > 350)) {
counter = 1;
}
});
});
$(function() {
$('#frame img').live('dblclick', function(ev, ui) {
// $(this).resizable("destroy")
$(this).hide();
var currentId = $(this).attr('id');
var deleteimage = 1;
saveCoords(ev.clientX, ev.clientY, currentId, document.getElementById("<%=trafficID.ClientID%>").value, deleteimage);
//$(this).unbind("resizable"); not working
//$(this).removeclass(); not working
});
});
$(document).ready(function() {
//Counter
counter = 0;
//Make element draggable
$("#fd img").draggable({
helper: 'clone',
containment: '#frame',
//When first dragged
stop: function(ev, ui) {
var pos = $(ui.helper).offset();
objName = "#clonediv" + counter
$(objName).css({ "left": pos.left, "top": pos.top });
$(objName).removeClass("drag");
//When an existiung object is dragged
$(objName).draggable({
containment: 'parent',
stop: function(ev, ui) {
var pos = $(ui.helper).offset();
//console.log($(this).attr("id"));
//console.log(pos.left)
//console.log(pos.top)
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
var pos = $(ui.helper).offset();
counter++;
var element = $(ui.helper).clone();
//var element = element1.resizable();
element.addClass("tempclass");
$(this).append(element);
var deleteimage = 0;
element.attr("id", ui.helper.attr('id') + counter);
saveCoords(ui.absolutePosition.left, ui.absolutePosition.top, ui.helper.attr('id') + counter, document.getElementById("<%=trafficID.ClientID%>").value, deleteimage);
$(".tempclass").attr("id", "clonediv" + counter);
$("#clonediv" + counter).removeClass("tempclass");
//$(".tempclass").attr("onclick",function(){ $(this).remove(););
//$("#clonediv" + counter).removeClass("tempclass");
//Get the dynamically item id
draggedNumber = ui.helper.attr('id').search(/drag([0-9])/);
itemDragged = "dragged" + RegExp.$1;
//console.log(itemDragged)
//alert('left' + pos.left + ',top' + pos.top + 'of item' + itemDragged);
$("#clonediv" + counter).addClass(itemDragged);
}
}
});
//Make the element resizable
});
答案 0 :(得分:2)
如果问题是定位点击的图片,则应将#frame img
替换为this
var test = 5;
$(function() {
$('#frame img').live('mousedown', function(event) {
test = test + 15;
$(this).rotate({ angle: test });
});
});
如果您正在使用jquery UI中的draggables和droppables,那么您需要向我们展示一些代码。 (最有可能的是,您实际上并未将已删除的元素重新定位到DOM中,而是将其放置在可放置区域中。)
<强>更新强>
问题是插件用canvas对象替换了图像并将其包装在一个假定元素的id / class的span中。
解决方案的目标不是实际的img标签,而是针对它的一个类。
因此,要为您希望可以自动<img class="rotatable" alt="" id="Img1" runat="server" src="~/Images/pdfcar.png" style="height:30px;width:30px;"/>
的img元素添加一个类,并使用live
方法$('#frame .rotatable').live(...)
定位该类。
继续使用$(this).rotate(...)
来应用旋转。
答案 1 :(得分:0)
var test = 5;
$(function() {
$('#frame img').live('mousedown', function(event) {
test = test + 15;
$('#frame img').rotate({ 'angle': test });//Error is here
});
});