2015-10-13 33 views
0

我想拖放li值到一個列表到另一個列表。如何用相應的圖像拖放一個li到另一個li?

例如: 我必須列出Items和ChoosenItems。

項目包含:

String 
Int 
Double 
Doller 
Rupees 

ChoosenItems: 如果用戶drog掉落的物品,以Choosen物品時需下降與相關的圖像風格值。 例如:如果我要去Drog Doller Means $簽名圖像,Rupees表示Rs圖像,Int表示123號碼圖像將動態放置在選擇項目上。

這是可能的。請幫我解決這個問題。

回答

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 
} 
     } 
    }); 
    }); 
相關問題