Question

在我的情况下，我会拖动项目，双击该拖动的项目我需要打开窗口，如pop，我创建的内容。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="chandru.css">
     <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>
    
</head>
<body>
<div id="wrapper">
    <div class="col" id="droppable"></div>
    <div class="col" id="col1">
        <div id="drag-list" class="drag-list">
            <ul>
                <li><span id="drag1" class="drag">
                        <img src="http://placehold.it/80x80/c9112d/fff&text=1"  />
                    </span><span>Item 1</span> 
                </li>
                <li><span id="drag2" class="drag">
                        <img src="http://placehold.it/80x80/E68500/fff&text=2"  />
                    </span><span>Item 2</span> 
                </li>
                <li><span id="drag3" class="drag">
                        <img src="http://placehold.it/80x80/00810C/fff&text=3" />
                    </span><span>Item 3</span> 
                </li>
                <li>
                    <div id="remove-drag" style="width: 100%; height: 80px; background-color: #FF8B8B;">
                        <div style="color: #fff; font-size: 20px; text-align: center; padding-top: 20px;">Remove
                            <div class="tip">Drop here</div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    var x = null;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    cursor: 'move',
    tolerance: 'fit',
    revert: true
});

$("#droppable").droppable({
    accept: '.drag',
    activeClass: "drop-area",
    drop: function (e, ui) {
        if ($(ui.draggable)[0].id != "") {


            x = ui.helper.clone();
            ui.helper.remove();
            x.draggable({
                helper: 'original',
                cursor: 'move',
                //containment: '#droppable',
                tolerance: 'fit',
                drop: function (event, ui) {
                    $(ui.draggable).remove();
                }
            });

            x.resizable({
                maxHeight: $('#droppable').height(),
                maxWidth: $('#droppable').width()
            });
            x.addClass('remove');            
            x.appendTo('#droppable');
            x.dblclick(function() {
            
            })
        }
    }
});

$("#remove-drag").droppable({
    drop: function (event, ui) {
        $(ui.draggable).remove();
    },
    hoverClass: "remove-drag-hover",
    accept: '.remove'
});
</script>
</body>
</html>

在x.click（）里面我需要输入这些代码。

<div id="popUpWindow">
                <input type="text" class="itemsMacId" placeholder="enter MAC id" ng-model="getId">
                <div class="select">
                    <span class="arr"></span>
                    <select>
                      <option>one</option>
                      <option>two</option>
                      <option>three</option>
                    </select>
                </div>
            </div>

但我很难附加到克隆对象x。输出我期待的是，我需要双击x打开我的弹出窗口。

如何在jquery中双击后附加html标签

0 个答案: