Placeholder is not shown in jquery sortable, drag & drop
- by balakrishnan
I can't show Place holder for the sortable items in a div.
<script type="text/javascript">
$(function() {
$("#userContent").sortable({
handle: '.close_button',
connectWith: '#userContent',
placeholder: 'placeholder',
forcePlaceholderSize: true,
tolerance: 'pointer',
revert: true,
});
});
</script>
<style type="text/css">
.webtitle_paragraphs {
width:98%;
float:left;
border:1px solid #0099CC;
margin:5px;
}
.close_button {
display:block;
overflow:visible;
visibility:visible;
height:20px;
background:#0099CC;
width:100%;
}
.placeholder {
background: #f0f0f0;
border:1px dashed #ddd;
visibility: visible !important;
}
.webtitle input {
width:98%;
font: bold 20px verdana;
border:0px;
}
.paragraph_txt textarea {
width:98%;
height:auto;
border:0px;
}
</style>
</head>
<body>
<div id="userContent">
<div class="webtitle_paragraphs" id="div4463_text">
<div class="close_button" id="close_4463"><a onclick="removeDiv('div4463_text');"><img src="images/close_button.png" alt="close" width="15" height="15" border="0" align="right"/></a></div>
<div class="webtitle_paragraph">
<div class="webtitle">
<input value="Title" name="webtitle4463" type="text" class="text _4463" />
</div>
</div>
</div>
<div class="webtitle_paragraphs" id="div7192_image">
<div class="close_button" id="close_7192"><a onclick="removeDiv('div7192_image');"><img src="images/close_button.png" alt="close" width="15" height="15" border="0" align="right"/></a></div>
<div class="webtitle_paragraph">
<div class="paragraph"><img src="https://localhost/web20/user_site_designs/images/noImage.jpeg" id="img7192" class="imageCntrl" onclick="uploadFile(7192)"/>
<input type="hidden" name="imgName7192" id="imgName7192" value="" class="image _7192"/>
</div>
</div>
</div>
<div class="webtitle_paragraphs" id="div9683_paragraph">
<div class="close_button" id="close_9683"><a onclick="removeDiv('div9683_paragraph');"><img src="images/close_button.png" alt="close" width="15" height="15" border="0" align="right"/></a></div>
<div class="webtitle_paragraph">
<div class="paragraph_txt">
<textarea class="paragraph _9683" name="myTextarea9683" id="myTextarea9683">Paragraphp</textarea>
</div>
</div>
</div>
</div>
Thanks is advance.
