jQuery Drag-n-Drop issue -



jQuery Drag-n-Drop issue -

i have 2 div elements 1. div (id="draggable") & div (id="dropper"). each of them contains several div within them. want drag , drop kid draggable dropper. after did want move them around in dropper. far have managed things, can't accomplish lastly part. because kid draggable can move in whole document. can pls help me this?

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>new web project</title> <link href="css/jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css"/> <link href="css/style.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="script/jquery-1.9.0.js"> </script> <script type="text/javascript" src="script/jquery-ui-1.10.0.custom.js"> </script> <script type="text/javascript" src="script/script.js"> </script> </head> <body> <div id="draggable" class="drop"> <h4>drag here</h4> <div id="wrapper1" class="floatleft">item1 </div> <div id="wrapper2" class="floatleft">item2 </div> <div id="wrapper3" class="floatleft">item3 </div> <div id="wrapper4" class="floatleft">item4 </div> </div> <div id="dropper" class="drop"> <h4>drop'em here</h4> <div class="floatleft">item1 </div> <div class="floatleft">item2 </div> <div class="floatleft">item3 </div> <div class="floatleft">item4 </div> </div> </body>

#draggable{ height:100px; border-style:solid; border-bottom-color:black; margin-right: 10px; } .floatleft{ float:left; margin:10px 10px 10px 10px; border-style:solid; border-color: gray; cursor: pointer; } #dropper{ height: 80px; /*width: 50%;*/ border-style:solid; border-bottom-color:black; margin-right: 10px; } $(function(){ $("#draggable").each(function(){ $("#draggable div").draggable(); } ); $("#dropper").droppable( ); $("#dropper div").draggable({ containment: "parent" }); });

seems me expect dropped item automatically inserted in dom construction of droppable - that's not case. , that's why code doesn't give want. however, there's sortable plugin might you're looking for. fact dropped div integrated in target's dom construction makes easy meet requirement:

$("#draggable").sortable ({ connectwith: "#dropper", items: "> div" }); $("#dropper").sortable({ containment: "parent", items: "> div" });

click link see jsfiddle uses sortable plugin

jquery jquery-ui

Comments

Post a Comment

Popular posts from this blog

javascript - mongodb won't find my schema method in nested container -

javascript - mongodb won't find my schema method in nested container - i trying access method of schema stored within mixed container. here situation : have cases model can many different things, have schema each of these things stored in "casecontent" mixed property. var caseschema = mongoose.schema({ casecontent : {}, object : {type:string, default : "null"}, collision : {type : boolean, default : false} }); the casecontent property filled model of 1 of schemas, 1 exemple : var treeschema = new mongoose.schema({ applecount : {type : number, default : 3} }); treeschema.methods.dostuff = function (data) { console.log('hey, listen'); homecoming true; }; then, want utilize method of schema original container : caseschema.methods.dostuff = function (data) { if (this.casecontent.dostuff !== undefined) { this.casecontent.dostuff(); console.log('it worked'); } else { ...
Read more

How do you set up a perforce server to work over the internet? -

How do you set up a perforce server to work over the internet? - i setting perforce server , noticed options localhosts , such. i'm trying setup server on desktop machine @ 1 household, , able connect using p4v client access files on net form household. no i'll have forwards ports , stuff set files need this? can find info servers beingness run on same network @ business or nil on internet. i've set team speak server go connect , type in ip address , port , connect server dosn't have options that, i've seen anyway. done on windows 7 64 bit machines. server on desktop , clients on desktops , laptops. help appreciated , i'll posting updates on i'm doing others can follow if needed. the server accepts tcp/ip connections, can client machine has tcp/ip connectivity. perforce server configuration telling ip address , port number hear @ p4port setting: http://www.perforce.com/perforce/r12.2/manuals/cmdref/env.p4port.html since you're on windo...
Read more

ios - Lagging ScrollView with UIWebview inside -

ios - Lagging ScrollView with UIWebview inside - i have uiwebview within uiscrollview lot of content. when content loaded uiwebview big, starts lag. does know how solve issue? maintain in mind lags when uiwebview's height becomes considerably big. thank in advance! if read documentation on uiwebview , states not embed uiwebview uitableview or uiscrollview . doing leads unexpected behaviour, , think experiencing first hand. sorry bearer of bad news. update - specific warning apple docs: the documentation addresses issue specifically. important: should not embed uiwebview or uitableview objects in uiscrollview objects. if so, unexpected behavior can result because touch events 2 objects can mixed , wrongly handled. apple reference on uiwebview . update 2: after doing few searches (search link, same posted in comments), came across this answer, may provide insight. monitors content offset in both uiscrollview , uiwebview via delegates, , cle...
Read more