jquery clone with increment id

Я хотел бы перетащить и клонировать изображение с увеличением id. В настоящее время я столкнулся с проблемой, когда я перетаскиваю и изображение клонируется, идентификатор не может быть создан. Я также хотел бы дважды щелкнуть изображение клонирования и сформировать всплывающее окно. Может кто-нибудь мне помочь?jquery clone with increment id

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>abcd</title> 
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script> 
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"> 
    <link href="abcd.css" rel="stylesheet" type="text/css"> 
    <script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script> 
    <link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> 
    <script src="jquery-1.9.1.js"></script> 
     <script src="jquery-ui.js"></script> 
    <script> 


      enter code here$(function() { 
       $(".image").draggable({ 
        helper: 'clone', 
        cursor: 'move', 
        tolerance: 'fit' 
       }) 

      $("#div1").droppable({ 
     drop: function(event, ui) { 

      if (ui.draggable[0].id) { 
       $(this).append($(ui.helper).clone().draggable({ containment: "#div1", scroll: false })); 
      } 
     } 
    }); 
     }); 

      $("img.image").click(function() { 
        loading(); // loading 
        setTimeout(function(){ // then show popup, deley in .5 second 
         loadPopup(); // function show popup 
        }, 500); // .5 second 
      return false; 
      }); 

      /* event for close the popup */ 
      $("div.close").hover(
          function() { 
           $('span.ecs_tooltip').show(); 
          }, 
          function() { 
           $('span.ecs_tooltip').hide(); 
          } 
         ); 

      $("div.close").click(function() { 
       disablePopup(); // function close pop up 
      }); 

      $(this).keyup(function(event) { 
       if (event.which == 27) { // 27 is 'Ecs' in the keyboard 
        disablePopup(); // function close pop up 
       } 
      }); 

      $("div#backgroundPopup").click(function() { 
       disablePopup(); // function close pop up 
      }); 


      /************** start: functions. **************/ 
      function loading() { 
       $("div.loader").show(); 
      } 
      function closeloading() { 
       $("div.loader").fadeOut('normal'); 
      } 

      var popupStatus = 0; // set value 

      function loadPopup() { 
       if(popupStatus == 0) { // if value is 0, show popup 
        closeloading(); // fadeout loading 
        $("#toPopup").fadeIn(0500); // fadein popup div 
        $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8 
        $("#backgroundPopup").fadeIn(0001); 
        popupStatus = 1; // and set value to 1 
       } 
      } 

      function disablePopup() { 
       if(popupStatus == 1) { // if value is 1, close popup 
        $("#toPopup").fadeOut("normal"); 
        $("#backgroundPopup").fadeOut("normal"); 
        popupStatus = 0; // and set value to 0 
       } 
      } 

     });` 
     </script> 
</head> 

<body> 
<div id="toPopup"> 
<div class="close"></div> 
    <span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span> 
     <div id="popup_content"> <!--your content start--> 
      <form> 
    <p>URL:<span id="sprytextfield1"> 
    <input name="url" type="text" /> 
    <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p> 
    <p> 
    <input type="submit" name="submit" id="submit" value="Submit" /> 
    </p> 
</form> 
<div class="loader"></div> 
</div></div> 
<div class="wrapper"> 
    <div class="banner"> 
    <h2><img src="untitled.png" width="305" height="166" alt="logo">iLiT - Input Module</h2> 
    </div> 
    <div class="navigation"> 
    <ul id="MenuBar1" class="MenuBarHorizontal"> 
     <li><a href="#">Item 1</a> 

     </li> 
     <li><a class="MenuBarItemSubmenu" href="#">Item 2</a> 
     <ul>  
      <li><a href="#">Item 1.1</a></li> 
      <li><a href="#">Item 1.2</a></li> 
      <li><a href="#">Item 1.3</a></li> 
     </ul> 
     </li> 
     <li><a class="MenuBarItemSubmenu" href="#">Item 3</a> 
     <ul> 
      <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> 
      <ul> 
       <li><a href="#">Item 3.1.1</a></li> 
       <li><a href="#">Item 3.1.2</a></li> 
      </ul> 
      </li> 
      <li><a href="#">Item 3.2</a></li> 
      <li><a href="#">Item 3.3</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Item 4</a></li> 
    </ul> 
    </div> 
    <div class="sidebar"> 
    <img src="images.jpg" alt="image" name="drag1" width="55" height="55" class="image" id="drag1"> 
    <img src="images1.jpg" width="55" height="55" alt="image1" name="drag2" id="drag2" class="image"> 
    <img src="images2.jpg" width="55" height="55" name="drag3" id="drag3" class="image"></div> 
    <div class="content"><div id="div1"></div></div> 

</div> 
<script type="text/javascript"> 
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); 
</script> 

</body> 
</html>

источник

2013-06-21 user2499450

Попробуйте

var idc = $(".image").length; 

$("#div1").droppable({ 
    drop: function(event, ui) { 

     if (ui.draggable[0].id) { 
      $(this).append($(ui.helper).clone().attr('id', 'drag' + ++idc).draggable({ containment: "#div1", scroll: false })); 
     } 
    } 
});

Демо: Fiddle

источник

2013-06-21 03:27:24

$ ("# div1") Droppable ({ \t \t падение:. Функция (событие, щ) { \t \t \t если ($ (ui.draggable) [0] .id! = "") { \t \t \t \t x = ui.helper. clone(). attr ('id', 'drag' + idC++); \t \t \t ui.helper.remove(); \t \t \t x.draggable ({ \t \t \t \t помощник: 'оригинал', \t \t \t \t сдерживания: '# div1', \t \t \t \t Допуск: 'подходит' \t \t \t}); \t \t \t \t x.appendTo ('# div1'); \t \t \t} \t \t \t \t \t \t } \t}); – user2499450

его работая, но всякий раз, когда я перетаскиваю изображение клонирования, идентификатор будет меняться всякий раз, когда я перестану его перетаскивать. например, когда я перетаскиваю одно изображение с id = drag2, когда я перетаскиваю и останавливаю перетаскивание, идентификатор снова изменится. вы можете помочь мне с этой проблемой? – user2499450

jquery clone with increment id

ответ

Смежные вопросы