IE Issue when removing an item from the Sortable
Hello,
I am using jQuery UI Sortable component. I want to remove items from
the sortable. To do this I drag any sortable item over a Droppable and
in the "drop" method of the Droppable I remove the dragged item. This
works fine in FireFox 3, Safari and Opera but does not work in IE.
Can someone please help me to fix issue with IE?
Below is script
----------------------------------------------------------------------------------------------------------------------------------
<script>
$(document).ready(function() {
var $columns = $('#columns');
var $columnsAnother = $('#columnsAnother');
var columnsOptions = {
placeholder: 'ui-state-highlight-placeholder',
connectWith: '#columnsAnother',
helper:'clone'
};
$columns.sortable(columnsOptions);
$('#drTrash').droppable({
accept : '.selectedcolumn',
drop: function(event, ui) {
// Delete the element dropped
if(ui.draggable.hasClass('selectedcolumn')) {
$(ui.draggable).remove();
}
}
});
});
</script>
----------------------------------------------------------------------------------------------------------------------------------
Stylesheet
----------------------------------------------------------------------------------------------------------------------------------
<style>
.label {
float:left;
width: 60%;
margin: 20px 0px 0px 20px;
}
.divBorder {
border: 2px solid black;
}
.selectedcolumn {
background:#28607E none repeat scroll 0 0;
border:1px solid #D3D3D3;
color:#FFFFFF;
cursor:pointer;
line-height:170%;
margin-right:5px;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:medium;
padding:1px;
white-space:normal;
}
.drTrash {
float:left;
width:60%;
height: 100px;
padding:5px;
margin-left: 20px
}
#columns {
float:left;
width:60%;
height:30px;
overflow:auto;
padding:5px;
margin-left: 20px
}
.ui-state-highlight-placeholder {
background-color: #5F9FBF;
height: 1.5em;
line-height: 1.2em;
padding-left:30px;
margin-right:5px;
}
</style>
----------------------------------------------------------------------------------------------------------------------------------
Page body
----------------------------------------------------------------------------------------------------------------------------------
<body>
<div class="label">Columns</div>
<div id="columns" class="divBorder">
<span id="Title_STRING" class="selectedcolumn">Title</span>
<span id="FirstName_STRING" class="selectedcolumn" style="">First
Name</span>
<span id="LastName_STRING" class="selectedcolumn">Last Name</span>
<span id="Street_STRING" class="selectedcolumn">Street</span>
<span id="City_STRING" class="selectedcolumn">City</span>
<span id="State_STRING" class="selectedcolumn">State</span>
</div>
<div class="label">Drag any column and drop in box below to delete
column</div>
<div id="drTrash" class="drTrash divBorder">
</div>
</body>