Question

我想用id的增量拖动和克隆图像。我目前面临一个问题，当我拖动并且图像是克隆时，无法创建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>

Answer 1

尝试

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

带有增量id的jquery clone

1 个答案: