Jquery ui 具有增量id的jquery克隆_Jquery Ui

Jquery ui 具有增量id的jquery克隆

jquery-ui

Jquery ui 具有增量id的jquery克隆,jquery-ui,Jquery Ui,我想拖动并克隆id递增的图像。我当前面临一个问题，当我拖动且图像为克隆时，无法创建id。我还想双击克隆图像和弹出式表单将生成。有人能帮我吗 <html> <head> <meta charset="utf-8"> <title>abcd</title> <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></sc

我想拖动并克隆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>


abcd
在此处输入代码$（function（）{
$（“.image”）.draggable({
助手：“克隆”，
光标：“移动”，
公差：“适合”
})
$（“#div1”）。可拖放({
drop：函数（事件、用户界面）{
if（ui.draggable[0].id）{
$（this.append（$（ui.helper.clone（）.draggable（{containment:#div1'，scroll:false}））；
}
}
});
});
$（“img.image”）。单击（函数（）{
加载（）；//加载
setTimeout（函数（）{//然后显示弹出窗口，在.5秒内删除
loadPopup（）；//函数show popup
}，500）；//0.5秒
返回false；
});
/*关闭弹出窗口的事件*/
$（“div.close”）。悬停(
函数（）{
$（'span.ecs_tooltip'）.show（）；
},
函数（）{
$（'span.ecs_tooltip'）.hide（）；
}
);
$（“div.close”）。单击（函数（）{
disablePopup（）；//函数关闭弹出窗口
});
$（此）.keyup（函数（事件）{
如果（event.which==27）{//27是键盘上的“Ecs”
disablePopup（）；//函数关闭弹出窗口
}   
});
$（“div#backgroundPopup”）。单击（函数（）{
disablePopup（）；//函数关闭弹出窗口
});
/**************开始：功能**************/
函数加载（）{
$（“div.loader”）.show（）；
}
函数closeloading（）{
$（“div.loader”）.fadeOut（“正常”）；
}
var popupStatus=0；//设定值
函数loadPopup（）{
如果（popupStatus==0）{//如果值为0，则显示弹出窗口
closeloading（）；//淡出加载
$（“#toPopup”）.fadeIn（0500）；//fadeIn弹出div
$（“#backgroundPopup”）.css（“不透明度”，“0.7”）；//css不透明度，支持IE7、IE8
$（“#backgroundPopup”）.fadeIn（0001）；
popupStatus=1；//并将值设置为1
}   
}
函数disablePopup（）{
如果（popupStatus==1）{//如果值为1，则关闭弹出窗口
$（“#toPopup”）。淡出（“正常”）；
$（“#背景弹出”）。淡出（“正常”）；
popupStatus=0；//并将值设置为0
}
}
});`
按Esc键关闭
网址：
需要一个值。格式无效


iLiT-输入模块
























var MenuBar1=new Spry.Widget.MenuBar（“MenuBar1”{imgDown:“SpryAssets/sprymenubardownhave.gif”，imgRight:“SpryAssets/sprymenubarrighthhover.gif”}）；

试试看

演示：

$（“#div1”）.dropable（{drop:function（event，ui）{if（$（ui.draggable）[0].id！=”）{x=ui.helper.clone（）.attr（'id'，'drag'+idc++）；ui.helper.remove（）；x.draggable（{helper:'original'，containment:'div1'，公差：'fit'}）；x.appendTo（'div1'）；}）；它可以工作，但每当我拖动克隆图像时，只要我停止拖动它，id就会改变。例如，当我拖动一个id=drag2的图像时，当我拖动并停止拖动时，id将再次更改。你能帮我解决这个问题吗？

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 }));
        }
    }
});