JQuery drag drop items and get its value to use it for search -
first of i'm not familiar jquery or javascript, know php
i followed youtube tutorial, didn't expected result.
what need create box drop images , , when image dropped in box title of image , can use title value in search (using box search area)
i started mentioned tutorial, is:
html:
<html> <head> <title>drag drop using jquery</title> <meta charset="utf-8"/> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="jquery.js"/></script> </head> <body> <ul> <li class="item"><img src="banana.png" title="banana" alt="banana" /></li> <li class="item"><img src="spinach.png" title="spinach" alt="spinach" /></li> <li class="item"><img src="cumin.png" title="cumin" alt="cumin" /></li> <li class="item"><img src="mango.png" title="mango" alt="mango" /></li> </ul> <div id="list"></div> </body> </html> css:
ul{ padding:0; width: 500px; list-style:none; } .item{ cursor:pointer; } #list{ border:1px solid #000000; width:100px; height:150px; background:#f0f0f0; } #list .border{ background:red; border-width:2px; } jquery:
$(document).ready(function(){ $('li').draggable({containment: "document", revert:true, start: function(){ contents = $(this).title(); } }); $('#list').droppable({hoverclass: 'border', accept: '.item', drop: function(){ $('#list').append(contents = ' '); } }); }) thank answering question
just wanna: 1- know how avoid repeating attr('title') added before ?
2- if add attr('title') mistake how delete ?
there no .title() method, means if want title have use .attr(). secondly selecting li has no title attribute, have select image instead.
you need declare contents outside draggable function, otherwise work there.
$(document).ready(function () { var contents = ''; $('li img').draggable({ containment: "document", revert: true, start: function () { contents = $(this).attr('title'); } }); $('#list').droppable({ hoverclass: 'border', accept: 'img', drop: function () { $('#list').append(contents + ' '); } }); })
Comments
Post a Comment