-- Learning not just technology, but dreams! Home HTML JAVASCRIPT CSS VUE REACT PYTHON3 JAVA C C++ C# AI GO SQL LINUX VS CODE BOOTSTRAP GIT Local Bookmarks jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Create CRUD Application jEasyUI Create CRUD DataGrid jEasyUI CRUD Form Application jEasyUI Create RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating a Drag-and-Drop Shopping Cart jEasyUI Creating a School Timetable jEasyUI Menu and Button jEasyUI Creating a Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating Border Layout jEasyUI Creating Complex Layout jEasyUI Creating Accordion jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-play Tabs jEasyUI Creating XP-style Left Panel jEasyUI DataGrid jEasyUI Converting HTML Table to DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding Toolbar jEasyUI Creating Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkbox jEasyUI Custom Pagination jEasyUI Enabling Inline Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating Custom View jEasyUI Creating Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating PropertyGrid jEasyUI Expanding Row Details jEasyUI Creating SubGrid jEasyUI Displaying Large Data jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating Simple Window jEasyUI Customizing Window Toolbar jEasyUI Window and Layout jEasyUI Creating Dialog jEasyUI Customizing Dialog jEasyUI Tree jEasyUI Creating Tree with Markup jEasyUI Creating Async Tree jEasyUI Adding Nodes to Tree jEasyUI Creating Tree with Checkbox jEasyUI Tree Drag and Drop Control jEasyUI Tree Loading Parent/Child Nodes jEasyUI Creating Basic TreeGrid jEasyUI Creating Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Adding Pagination jEasyUI TreeGrid Lazy Loading Nodes jEasyUI Form jEasyUI Creating Async Submit Form jEasyUI Form Validation jEasyUI Creating Tree ComboBox jEasyUI Formatting ComboBox jEasyUI Filtering ComboBox DataGrid jEasyUI Reference jQuery EasyUI Plugins jQuery EasyUI Extensions jQuery EasyUI Drag and Drop – Basic Drag and Drop jQuery EasyUI Drag and Drop – Creating a School Timetable Deep Dive Shopping and Retail Shopping Shopping Programming shopping Scripting Languages Web Design and Development Scripts Web Service Computer Science jQuery EasyUI Drag and Drop - Creating a Drag-and-Drop Shopping Cart If you can easily implement drag and drop in your web application, you'll know something special. With jQuery EasyUI, we can easily implement drag-and-drop functionality in web applications. In this tutorial, we will show you how to create a shopping cart page that enables users to drag and drop items they want to buy. The items and prices in the shopping basket will be updated. Displaying Products on the Page     

        
•                                               
                      

  Balloon

                      

  Price:$25

                  
                       
        
•                                               
                      

  Feeling

                      

  Price:$25

                  
                       
             

As you can see in the code above, we added a

element containing some
• elements to display the products. All products have name and price attributes, which are contained in

  elements. Creating the Shopping Cart     

          

  Shopping Cart

                                                                                                                                              

  Name	Quantity	Price

          

  Total: $0

          

  Drop here to add to cart

      
  We use a data grid (datagrid) to display the items in the shopping basket. Dragging Cloned Products     $('.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';         }     }); Please note that we set the draggable property's value from 'proxy' to 'clone', so the dragged element will be generated by cloning. Dropping Selected Products into the Shopping Cart     $('.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 name = $(source).find('p:eq(0)').html();             var price = $(source).find('p:eq(1)').html();             addProduct(name, parseFloat(price.split('$')));         }     });     var data = {"total":0,"rows":[]};     var totalCost = 0;     function addProduct(name,price){         function add(){             for(var i=0; i<data.total; i++){                 var row = data.rows;                 if (row.name == name){                     row.quantity += 1;                     return;                 }             }             data.total += 1;             data.rows.push({                 name:name,                 quantity:1,                 price:price             });         }         add();         totalCost += price;         $('#cartcontent').datagrid('loadData', data);         $('div.cart .total').html('Total: $'+totalCost);     }     Whenever a product is dropped, we first get the product name and price, then call the 'addProduct' function to update the shopping basket. Download jQuery EasyUI Example jeasyui-dd-shopping.zip jQuery EasyUI Drag and Drop – Basic Drag and Drop jQuery EasyUI Drag and Drop – Creating a School Timetable ByteArk Coding Plan Supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable. Configuration Guide ¥9.9 / Month Activate Now iFlytek Star Coding Plan Includes free model call quota, DeepSeek, GLM, Kimi, MiniMax, one-stop experience and deployment platform. Configuration Guide ¥3.9 / Month Activate Now Click here to share notes Category Navigation Python / Data Science AI / Intelligent Development Front-end Development Back-end Development Database Mobile Development DevOps / Engineering Programming Languages Computer Basics XML / Web Service .NET Website Building Advertisement jQuery EasyUI Tutorial jQuery EasyUI Tutorial jQuery EasyUI Introduction jEasyUI Applications jEasyUI Create CRUD Application jEasyUI Create CRUD DataGrid jEasyUI CRUD Form Application jEasyUI Create RSS Reader jEasyUI Drag and Drop jEasyUI Basic Drag and Drop jEasyUI Creating a Drag-and-Drop Shopping Cart jEasyUI Creating a School Timetable jEasyUI Menu and Button jEasyUI Creating a Simple Menu jEasyUI Creating Link Buttons jEasyUI Creating Menu Buttons jEasyUI Creating Split Buttons jEasyUI Layout jEasyUI Creating Border Layout jEasyUI Creating Complex Layout jEasyUI Creating Accordion jEasyUI Creating Tabs jEasyUI Dynamically Adding Tabs jEasyUI Adding Auto-play Tabs jEasyUI Creating XP-style Left Panel jEasyUI DataGrid jEasyUI Converting HTML Table to DataGrid jEasyUI Getting Selected Row Data jEasyUI Adding Search Functionality jEasyUI Adding Toolbar jEasyUI Creating Complex Toolbar jEasyUI Setting Frozen Columns jEasyUI Dynamically Changing Columns jEasyUI Formatting Columns jEasyUI Setting Sorting jEasyUI Custom Sorting jEasyUI Creating Column Groups jEasyUI Adding Checkbox jEasyUI Custom Pagination jEasyUI Enabling Inline Editing jEasyUI Extending Editors jEasyUI Column Calculation jEasyUI Merging Cells jEasyUI Creating Custom View jEasyUI Creating Footer Summary jEasyUI Setting Row Background Color Conditionally jEasyUI Creating PropertyGrid jEasyUI Expanding Row Details jEasyUI Creating SubGrid jEasyUI Displaying Large Data jEasyUI Adding Pagination Component jEasyUI Window jEasyUI Creating Simple Window jEasyUI Customizing Window Toolbar jEasyUI Window and Layout jEasyUI Creating Dialog jEasyUI Customizing Dialog jEasyUI Tree jEasyUI Creating Tree with Markup jEasyUI Creating Async Tree jEasyUI Adding Nodes to Tree jEasyUI Creating Tree with Checkbox jEasyUI Tree Drag and Drop Control jEasyUI Tree Loading Parent/Child Nodes jEasyUI Creating Basic TreeGrid jEasyUI Creating Complex TreeGrid jEasyUI TreeGrid Dynamic Loading jEasyUI TreeGrid Adding Pagination jEasyUI TreeGrid Lazy Loading Nodes jEasyUI Form jEasyUI Creating Async Submit Form jEasyUI Form Validation jEasyUI Creating Tree ComboBox jEasyUI Formatting ComboBox jEasyUI Filtering ComboBox DataGrid jEasyUI Reference jQuery EasyUI Plugins jQuery EasyUI Extensions Online Examples ·HTML Examples ·CSS Examples ·JavaScript Examples ·Ajax Examples ·jQuery Examples ·XML Examples ·Java Examples Character Sets & Tools · HTML Character Set Settings · HTML ASCII Character Set · JS Obfuscation/Encryption · PNG/JPEG Image Compression · HTML Color Picker · JSON Formatting Tool · Random Number Generator Latest Updates · Codex Advanced Configuration · AI Agent Terminology · ZCode Getting Started Tutorial · Loop Engineerin... · Claude Code Us... · Claude Code Us... · docker compose ... Site Information · Feedback · Disclaimer · About Us · Article Archive Follow WeChat My Favorites Mark Article Browsing History Clear All No Records