Add controlling properties to make drag and drop experience smoother

I am adding child divs to a parent div dynamically and can successfully drag and drop the child divs between the parent divs, but the dragging and dropping behaviour is not user friendly. Just slight movement of a child div initiates the drag and drop. And when dragging a child div in one direction it cannot be returned to its destination. What properties can I add and set to draggable or droppable to exert more control and make the user experience smoother?

Here are the two parent divs that get populated dynamically together with the relevant parts of the two functions that carry out the population and make the child divs draggable.

    <table>
        <tr>
            <td>
            <center>Not Selected</center><br />
            <div class="MDTOptionsHostDivLive" liveUnselected"     id="divLiveMDTOptionsUnselected">
             </div>
            </td>
            <td>
            <center>Selected</center><br />
            <div class="MDTOptionsHostDivLive" liveSelected"     id="divLiveMDTOptionsSelected">
            </div>
            </td>
        </tr>
    </table>


    if (data.length > 0) {                          
        $.each(data, function (index, item) {
            $newDiv = '<div data-option="' + item.Description + '" data-optiontype="1"' + ' class="MDTUnselectedLiveOptionsChildDiv ui-draggable ui-draggable-handle ui-droppable" id="' + item.ID + '"><div><img src="../../graphics/SmallRedDragNDrop.jpg" /></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<div>' + item.Description + '</div></div>';
            $hostDiv.append($newDiv);      
        }); 
        $('.MDTUnselectedLiveOptionsChildDiv').each(function () {
            $(this).draggable({ containment: '#divLiveMDTOptionsSelected' });
        });
        $('.MDTUnselectedLiveOptionsChildDiv').each(function () {
            $(this).droppable({ accept: '.liveSelected' });
        });
    }


                    if (data.length > 0) {
        $.each(data, function (index, item) {
            $newDiv = '<div data-option="' + item.Description + '" data-optiontype="1"' + ' class="MDTSelectedLiveOptionsChildDiv ui-draggable ui-draggable-handle ui-droppable" id="' + item.ID + '"><div><img src="../../graphics/SmallGreenDragNDrop.jpg" /></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + '<div>' + item.Description + '</div></div>';
            $hostDiv.append($newDiv);
        });
        $('.MDTSelectedLiveOptionsChildDiv').each(function () {
            $(this).draggable({ containment: '#divLiveMDTOptionsUnselected' });
        });
        $('.MDTSelectedLiveOptionsChildDiv').each(function () {
            $(this).droppable({ accept: '.liveUnselected' });
        });
    }