Search code examples
jqueryjquery-uijquery-ui-draggablejquery-ui-resizable

Keep drag options when create new element in jQuery

I'm creating a little app in jQuery with draggable an resizable plugin.

My problem, is when I create a new element by jQuery, it do not keep my draggable an resizable setting.

Could you please help me with this?

Here's my code: 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>
Solution

  • The issue here is that you initialize the plugin with your custom options only for initially existing elements. The dynamic elements you are adding are not initialized with your custom options and event handlers, you just do .draggable() which uses the default options of the draggable plugin. You should save your settings to a variable and pass them to any draggable you initialize that needs those options:

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

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

    Here is a working example with cached custom draggable options based on your code: http://jsfiddle.net/XdFsg/. The same goes for resizables.