0

我正在 jQuery 中创建一个带有可拖动可调整大小插件的小应用程序。

我的问题是，当我通过 jQuery 创建一个新元素时，它不会让我的可拖动设置保持可调整大小。

你能帮我解决这个问题吗？

这是我的代码：http: //jsfiddle.net/ewYwC/1/

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<style>
body { margin:0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif; }

#PageOptions { width:240px; height:100%; border-right:1px solid #E5E5E5; margin:0px; padding:5px; background:#FFF8E7; position:absolute; }

#PageContainer { width:986px; height:676px; border:3px solid #CCC; margin:10px 10px 10px 265px; background:#F1F1F1; position:absolute; }
#AdContainer { width:460px; height:670px; border:1px dashed #666; margin:0px; position:absolute; background:#FFF; }
.ui-widget-content { width:150px; height:150px; z-index:0; }
.handle { cursor: move; background-color:#CCC; padding:0px; margin:0px; }
.ui-resizable-helper { border: 1px dotted #900; }

#ObjList {width:100%; height:80px; border-bottom:1px solid #E5E5E5; display:block; background:#F1F1F1; }
ul, li { margin:0px; padding:0px; list-style-image:none; }
li { width:50px; height:50px; border:1px solid #CCC; display:inline-block; background:#F0E8BB; margin:5px; padding:5px; overflow:hidden; font-size:12px;  border-radius: 10px; }
</style>
<script>
$(function() {

    $("#adSize").text("Taille de la publicité: " + $("#AdContainer").width() + "x" + $("#AdContainer").height());

    $(".ui-widget-content")
        .draggable({
            containment: "#AdContainer",
            scroll: false,
            // grid: [5, 5],
            handle: ".handle",
            snap: true,
            stack: "div",
            drag: function(event, ui) {
                var objId = $(this).attr("id");
                var objPos = $(this).position();
                $("#objName").text("Comportement: " + objId);
                $("#objTopPos").text("Marge à gauche:  " + objPos.left + "px");
                $("#objLeftPos").text("Marge en haut: " + objPos.top + "px");
            }
    })

        .resizable({
            animate: true,
            containment: "#AdContainer",
            resize: function(event, ui) {
                var objWidth = ui.size.width;
                var objHeight = ui.size.height;
                $("#objWidthSize").text("Largeur: " + objWidth + "px");
                $("#objHeightSize").text("Hauteur: " + objHeight + "px");
            },
            minHeight: 100,
            minWidth: 100,
    })

    $(".deleteObj").click(function () {
        $(this).parents('.ui-widget-content').remove();
    })

    // Obj creation
    $(".createObjImage").click(function () {
        var newObjImage = $('<div id="Image" class="ui-widget-content"><p class="handle"><span class="deleteObj">[x]</span> Image</p></div>').draggable().resizable();
        $("#AdContainer").append(newObjImage);
    })

});
</script>
</head>

<body> 
    <div id="ObjList">
        <ul>
            <li class="createObjImage">Image</li>
            <li class="createObjAccordeon">Accordeon</li>
            <li class="createObjSwipe">Swipe</li>
            <li class="createObjVideo">Video</li>
            <li class="createObjFlip">Flip</li>
            <li class="createObjSlider">Slider</li>
        </ul>
    </div>

    <div id="PageOptions">
        <span id="adSize"></span><br />
        ----------<br />
        <span id="objName"></span><br />
        <span id="objTopPos"></span><br />
        <span id="objLeftPos"></span><br />
        <span id="objWidthSize"></span><br />
        <span id="objHeightSize"></span>
    </div>

    <div id="PageContainer">
        <div id="AdContainer">
            <div id="Accordeon" class="ui-widget-content">
                <p class="handle"><span class="deleteObj">[x]</span> Accordeon</p>
            </div>
            <div id="Flip" class="ui-widget-content">
                <p class="handle"><span class="deleteObj">[x]</span> Flip</p>
            </div>
            <div id="Swipe" class="ui-widget-content">
                <p class="handle"><span class="deleteObj">[x]</span> Swipe</p>
            </div>
        </div>
    </div>

</body>
</html>
4

1 回答 1

1

这里的问题是，您只为最初存在的元素使用自定义选项初始化插件。您添加的动态元素不会使用您的自定义选项和事件处理程序进行初始化，您只需.draggable()使用可拖动插件的默认选项即可。您应该将设置保存到变量并将它们传递给您初始化的任何需要这些选项的可拖动对象：

var draggableOptions = {
  // your custom options go here
}

$('element').draggable(draggableOptions);

这是一个基于您的代码的缓存自定义可拖动选项的工作示例：http: //jsfiddle.net/XdFsg/。可调整大小也是如此。

于 2012-11-18T13:53:52.750 回答