Placeholder is not shown in jquery sortable, drag & drop

Question

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>

<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"/>
        <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.

Answer 1

Add float:left to the .placeholder style.

Also you have a comma after revert:true that should not be there.