Question

我的要求是：

使用on_click克隆动态创建的图片。
能够拖动克隆的对象。
能够删除它并捕获该图像的位置。

在使用ajax控件修补一周之后，现在我想到了使用jQuery。如果您可以推荐一些与此相关的文章，它将对我有所帮助。我在这个网站上阅读了很多文章，但无法找到解决方案。

我得到了以下代码，但我不知道如何添加调整大小的功能：

$(document).ready(function() {
      //Counter

          counter = 0;
          //Make element draggable
          $(".drag").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 the element resizable 


          //Make element droppable
          $("#frame").droppable({ 

              drop: function(ev, ui) {
                  if (ui.helper.attr('id').search(/drag[0-9]/) != -1) {
                      counter++;
                      var element = $(ui.draggable).clone();
                      element.addClass("tempclass");
                      $(this).append(element);
                      $(".tempclass").attr("id", "clonediv" + counter);
                      $("#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)

                      $("#clonediv" + counter).addClass(itemDragged);
                  }
              }
          });
      });

我有一些示例代码来调整图像大小，但我无法将克隆放入我的框架中：

 $(document).ready(function() {
      $("#fff").resizable({ handles: "all", ghost: true, autoHide: true }).parent().draggable({ helper: 'clone', containment: 'frame' });

      });
     ***my Code behind .cs class***
     TableCell newcell = new TableCell();
                    System.Web.UI.WebControls.Image myImage = new System.Web.UI.WebControls.Image();
                    myImage.ID = "imgv" + dt.Rows[datavount]["id"];
                    //myImage.Attributes.Add("alt",  myImage.ID+"fffff");
                    myImage.Width = Unit.Pixel(30);
                    myImage.Height = Unit.Pixel(30);

 Panel newpanel = new Panel();
                    newpanel.ID = "pnl" + myImage.ID;
                    newpanel.BorderStyle = BorderStyle.Outset;
                    newpanel.Controls.Add(myImage);
                    newpanel.Width = Unit.Pixel(50);
                    newpanel.Height = Unit.Pixel(50);
                    newpanel.Attributes.Add("class", "drag");[my jquery function is applied to drag class]
                    newcell.Controls.Add(newpanel);

谢谢，

Answer 1

听起来jQuery UI Draggable正如你所追求的那样。您可以使用helper: 'clone' option进行克隆，如下所示：

$("img").draggable({
  helper: "clone"
});

您可以使用drop事件附加您想要的任何行为，例如添加关闭按钮，获取位置等，例如：

$("img").draggable({
  helper: "clone",
  stop: function(e, ui) {
    var top = ui.position.top;   //new left position of cloned/dragged image
    var left = ui.position.left; //new top position of cloned/dragged image
  }
});

使用jQuery＆amp; amp;拖放，克隆和克隆使用Javascript

1 个答案: