如何拖动一个li到另一个li与各自的图像?

时间:2015-10-13 06:12:04

标签: javascript c# jquery

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

例如: 我必须列出Items和choosenItems。

项目包含:

String
Int
Double
Doller
Rupees

ChoosenItems: 如果用户drog drop项目选择项目,那时候需要删除具有相关图像样式的值。 例如:如果我要去玩Doller Means $ sign图像,Rupees意味着Rs图像,Int意味着123数字图像将动态地放在选择项上。

可以这样做。请帮我解决这个问题。

1 个答案:

答案 0 :(得分:0)

下面是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
}
        }
    });
   });