Question

我在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


  });

Answer 1

如果问题是定位点击的图片，则应将#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(...)来应用旋转。

Answer 2

var test = 5;
 $(function() {
     $('#frame img').live('mousedown', function(event) {
              test = test + 15;
              $('#frame img').rotate({ 'angle': test });//Error is here

     });
 });

如何使用Jquery旋转拖放图像

2 个答案: