1

I have a diff with draggable property within the parent. When I create the div statically it works but the same one when I create dynamically it doesn't work.

>

    <!DOCTYPE html>
<html>
<head>
<title>Website Title</title>


<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>


$(function() {
$( ".dragablelement" ).draggable({ containment: "parent", scroll: false });
});


function actionsubmitpressed() {
}
</script>


<style type="text/css">
* {margin: 10; padding: 10;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: middle; font-size: 12px;}
#container {width: 95%; background: #ffe6d5;}
#left {width: 32%; background: #ff5555;}
#middle {width: 32%; background: #ff5555;}
#right {width: 32%; background: #ff5555;}
#black_heading {width: 96%; background: black;}
#heading-3 { background: white;}
#sub_heading {border: 1px solid; border-radius: 10px; text-align: center; padding: 2px;}
.dragablelement { display: block; background: green;border: 1px solid; border-radius: 5px;}

.column_41 {display: inline-block; *display: inline; zoom: 1; vertical-align: middle; font-size: 12px;}
.column_41 {width: 20%; height: 200px; background: #ffaaaa; border-radius: 10px; padding: 5px;}
</head>

<body>
<div id="container">
    <div id="black_heading" align='right'>
        <div id="left" align='right'>Action: 
            <button id = 'actionsubmitbutton' onClick='addbacklog()' > Submit
            </button>
        </div>
    </div>

    <div  id="heading-3">
        <div id = 'backlog_container' class="column_41"><div id='sub_heading'>Backlog </div>
            <div id="draggable" class="dragablelement ">
                Hello
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

  function addbacklog() {
    bcklg = document.getElementById("backlog_container");
    bcklg.appendChild(getBacklogBlock());
  }
  function getBacklogBlock(){
    newdiv = document.createElement('div');
    newdiv.setAttribute('class', 'dragablelement');
    $( .dragablelement ).draggable({axis: "x" });
    newnode = document.createTextNode('Hello world');
    newdiv.appendChild(newnode);
    return newdiv;
  }
</script>
</body>
</html>

Any idea what is going wrong here.

Thanks in advance ~S

user2677279
  • 127
  • 3
  • 10

1 Answers1

0

This one worked for me .Take a look here : http://jsfiddle.net/csdtesting/cpj7zx2q/

JS Code:

  window.addbacklog = function() {
    bcklg = document.getElementById("backlog_container");
    bcklg.appendChild(getBacklogBlock());     
    $(".dragablelement").draggable({axis: "x" });
  }
  window.getBacklogBlock = function() {
    newdiv = document.createElement('div');
    newdiv.setAttribute('class', 'dragablelement');
    newnode = document.createTextNode('Hello world');
    newdiv.appendChild(newnode);      
    return newdiv;
  }

If you have tried to see it working only in jsfiddle take a look at "this question about function is undefined"

Community
  • 1
  • 1
Giannis Grivas
  • 3,374
  • 1
  • 18
  • 38