Hello i am developing a drag and drop app. I have a DIV that is draggable along the document and there are some other divs in the document, I can drag one div to other divs, and this make mess to page i want to drop it NOT in another div like him i want to drop it in empty place and to disable the drop in another div for example if the class of the div that i trying to droping is cart-item not let him do the drop
<div id="cart">
<h1 class="ui-widget-header">Demonstration Site</h1>
<div class="ui-widget-content">
<ol id="insert-zone" class="ui-droppable ui-sortable">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
<div class="item-container cart-item">
</ol>
</div>
</div>
i tried to do this but this not working
}).sortable({
// items: "div:not(.placeholder)",
items:"div:not(.insert-zone-End-of-Page)", //prevents objects from dragging
sort: function() {
$(this).removeClass("ui-state-default");
if( $(this).class!="cart-item") var position = $(this).offset();
console.log($(this).class!="cart-item");
This is the full cart-item div
<div class="item-container cart-item">
<div class="SetDefault">
<span></span>
</div>
<img border="0" title="Double click to Set Default Cat" src="http://www.myengravedjewelry.com/images/products/medium_101-01-071-08.jpg" alt="2027">
<div class="item-header">
<div class="item-body">
<ul class="item-ul">
<li>
<span>ShortId: 2027.</span>
</li>
<li>
<li>
<li>
<li>
</ul>
</div>
</div>
<div class="item-footer"></div>
</div>