jQuery click on clone and in a window see/change name or delete -

-

i'm new in programming in jquery , need help. basically, far have code dragging toolbox , dropping clones.

html: 

<div id="toolbox"> <div class="exponat" ></div> <div class="bluetooth" ></div> <div class="wall1" ></div> <div class="wall2" ></div> <div class="wall3" ></div> <div class="wall4" ></div> </div> <br> <div id="droppable"></div>

jquery:

      $("#droppable").droppable({       // accept draggables #toolbox,       // prevent cloning of draggables(inside drop event handler),       //  have been dropped inside #container       accept: "#toolbox .exponat, #toolbox .bluetooth, #toolbox .wall1, #toolbox .wall2,#toolbox .wall3,#toolbox .wall4",       drop: function (event, ui) {         var $clone = ui.helper.clone();         if (!$clone.is('.inside-droppable')) {             $(this).append($clone.addclass('inside-droppable').draggable({                 containment: '.droppable',                  tolerance: 'fit',                 position: 'relaitve'             }));              $clone.resizable({                 //animate: 'true',                 //ghost: 'true',                 handles:     'ne, nw, se, sw',                 //containment: '.container',             });                                      }                  },    });   // $("#container").resizable();  $(".exponat").draggable({       revert: "invalid",       helper: "clone"   });  $(".bluetooth").draggable({       revert: "invalid",       helper: "clone"   });   $(".wall1").draggable({       revert: "invalid",       helper: "clone"   });   $(".wall2").draggable({       revert: "invalid",       helper: "clone"   });   $(".wall3").draggable({       revert: "invalid",       helper: "clone"   });   $(".wall4").draggable({       revert: "invalid",       helper: "clone"   });

http://jsfiddle.net/pia92/kka3n/

i want scenario possible: -opening window on click on particular clone -in window see current name , have possibility change typing -have button delete particular clone have no idea whether possible, please give me solution/some similar project/good tutorial. thanks.

step 1

add id attribute clones indentify them.

... drop: function (event, ui) { var $clone = ui.helper.clone();     // give clone id indentify it.     $clone.attr('id', 'clone' + $('.inside-droppable').length);     if (!$clone.is('.inside-droppable')) { ...

step 2

create popup windows show clone's property:

... <br> <div id="droppable"></div> <!-- create popup window -->     <div id="property-window">     put textboxes, or want here:<br/>     id: <input id="clonename" type="text"/> </div>

style it:

... #property-window {     background-color: white;     border: 1px solid;     position: absolute;     left: 0;     top: 0;     width: 200px;     padding: 10px;     display: none; }

and make draggable

  ...   $(".wall4").draggable({       revert: "invalid",       helper: "clone"   });   // make property window draggable   $("#property-window").draggable();

step 3

add event handler open popup window:

$('body').on('click','.inside-droppable', function() {     var target = $(this);     $('#property-window').css({         // set position         top: target.position().top,         left: target.position().left + target.width(),         // show         display: 'block'     });     // update value     $('#property-window input#clonename').val(target[0].id); });

here working demo: http://jsfiddle.net/trungdq88/qrm4r/

hope you, , don't forget create button close popup yourself, luck!


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more