如何用一个图像将一个li拖放到另一个li？

Question

我想将Drop li值拖放到一个列表到另一个列表。

例如：我必须列出项目和选择项。

项目包含：

String
Int
Double
Doller
Rupees

ChoosenItems：如果用户drog将“ Items”拖放到“ Selected Items”，那么此时需要使用相关的图像样式来删除该值。 例如：如果我要拖延，Doller表示$符号图像，Rupees表示Rs图像，Int表示123数字图像将动态落在choicenitem上。

有可能做到这一点。 请帮我解决这个问题。

Answer 1

以下是HTML

<ul>
    <li>
     <a href="#" class="item" id="1">String</a>      
    </li>
    <li>
    <a href="#" class="item" id="2">Int</a>
    </li>
 </ul> 
 <div  class="cart">
 </div>

这是使元素能够拖放的Java脚本，并获得被丢弃的元素ID。

 $(function () {
    $('.item').draggable({
        revert: true,
        proxy: 'clone',
        onStartDrag: function () {
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index', 10);
        },
        onStopDrag: function () {
            $(this).draggable('options').cursor = 'move';
        }
    });
    $('.cart').droppable({
        onDragEnter: function (e, source) {
            $(source).draggable('options').cursor = 'auto';
        },
        onDragLeave: function (e, source) {
            $(source).draggable('options').cursor = 'not-allowed';
        },
        onDrop: function (e, source) {

            var id=source.id;
// this var id lets you know that which item has been dropped into the cart div .. 
//you can implement the remaining functionality according to your   requirement.
if(id==1)
{
//Load String Image
}
else if(id==2)
{
//Load Int Image
}
        }
    });
   });