Jquery collision: draggable and target collision event
Question
I am using jQuery collision with draggable. I have code working to change the color of the target (the larger box) on drop. However, I would like it to change color as soon as the dragMe touches it.
Thanks in advance for your help!
Here's the code: https://jsfiddle.net/rebeccaoutofourmindsstudios/mgL968x4/2/
$(".dragMe").draggable({ obstacle: ".obstacle", preventCollision: true, containment: "#moveInHere" }); $(".obstacle").draggable({ obstacle: ".dragMe", preventCollision: true, containment: "#moveInHere" }); $(document).ready(function() { $("#dragMe").draggable({ containment: ".moveInHere", obstacle: ".obstacle" }); $("#obstacle").draggable({ containment: ".moveInHere" }); $("#Target1").droppable({ tolerance: "touch", preventCollision: true, drop: dropItem }); }); function dropItem(ev, ui) { $("#Target1").css({ background: "blue" }); }
#moveInHere { with: 500px; height: 500px; border: 1px solid black; background: #eee; }.dragMe { width: 50px; height: 50px; border: 1px solid black; background: #eee; }.obstacle { width: 50px; height: 50px; border: 1px solid black; background: #eee; }.target { postition: absolute; top: 100px; left: 200px; width: 100px; height: 100px; border: 1px solid black; background: #eee; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <;DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <meta http-equiv="content-type" content="text/html, charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width. initial-scale=1"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light:css"> <script type="text/javascript" src="http.//eruciform.com/static//jquidragcollide/jquery-collision:js"></script> <script type="text/javascript" src="http.//eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script> </head> <body> <div class="moveInHere" id="moveInHere"> <div class="dragMe" id="dragMe">Drag me...</div> <div class="obstacle" id="obstacle">...but not in here.</div> <div class="target" id="Target1">I want to change color</div> </div>
2 answers
solution1
2 2021-05-02 14:40:31
You can use the over event callback like this:
over: function(event, ui) {
$(this).css('background', 'dodgerblue');
}
$(document).ready(function() { $(".dragMe").draggable({ obstacle: ".obstacle", preventCollision: true, containment: "#moveInHere" }); $(".obstacle").draggable({ obstacle: ".dragMe", preventCollision: true, containment: "#moveInHere" }); $("#Target1").droppable({ tolerance: "touch", preventCollision: true, over: function(event, ui) { $(this).css('background', 'dodgerblue'); }, out: function(event, ui) { $(this).css('background', '#eee'); }, drop: dropItem }); }); function dropItem(ev, ui) { $(this).css({ background: "blue" }); }
#moveInHere { width: 500px; height: 500px; border: 1px solid black; background: #eee; }.dragMe { width: 50px; height: 50px; border: 1px solid black; background: #eee; }.obstacle { width: 50px; height: 50px; border: 1px solid black; background: #eee; }.target { position: absolute; top: 100px; left: 200px; width: 100px; height: 100px; border: 1px solid black; background: #eee; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <;DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <meta http-equiv="content-type" content="text/html, charset=UTF-8"> <meta name="robots" content="noindex, nofollow"> <meta name="googlebot" content="noindex, nofollow"> <meta name="viewport" content="width=device-width. initial-scale=1"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="/css/result-light:css"> <script type="text/javascript" src="http.//eruciform.com/static//jquidragcollide/jquery-collision:js"></script> <script type="text/javascript" src="http.//eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script> </head> <body> <div class="moveInHere" id="moveInHere"> <div class="dragMe" id="dragMe">Drag me...</div> <div class="obstacle" id="obstacle">...but not in here.</div> <div class="target" id="Target1">I want to change color</div> </div> </body> </html>
solution2
2 2021-05-02 15:02:49
Just use hoverClass: in the droppable definition (like mentioned in the jquery.ui documentation ) and apply the background-color to that class.
Working example:
$(".dragMe").draggable({ obstacle: ".obstacle", preventCollision: true, containment: "#moveInHere" }); $(".obstacle").draggable({ obstacle: ".dragMe", preventCollision: true, containment: "#moveInHere" }); $(document).ready(function() { $("#dragMe").draggable({ containment: ".moveInHere", obstacle: ".obstacle" }); $("#obstacle").draggable({ containment: ".moveInHere" }); $("#Target1").droppable({ hoverClass: "drop-hover", tolerance: "touch", preventCollision: true, drop: dropItem }); }); function dropItem(ev, ui) { $("#Target1").css({ background: "blue" }); }
#moveInHere { with: 500px; height: 500px; border: 1px solid black; background: #eee; }.dragMe{ width: 50px; height: 50px; border: 1px solid black; background: #eee; }.obstacle{ width: 50px; height: 50px; border: 1px solid black; background: #eee; }.target{ postition: absolute; top:100px; left:200px; width: 100px; height: 100px; border: 1px solid black; background: #eee; }.target.drop-hover{ background-color: blue; }
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script> <script type="text/javascript" src="http://eruciform.com/static//jquidragcollide/jquery-collision.js"></script> <script type="text/javascript" src="http://eruciform.com/static//jquidragcollide/jquery-ui-draggable-collision.js"></script> <div class="moveInHere" id="moveInHere"> <div class="dragMe" id="dragMe">Drag me...</div> <div class="obstacle" id="obstacle">...but not in here.</div> <div class="target" id="Target1">I want to change color</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Jquery draggable collision detection bug
jQuery event collision
collision detection on more than 2 divs with jQuery draggable?
Wicket & jQuery Overlap/Collision
Jquery DIV collision
jQuery Dragging With Collision Detection
jQuery/JavaScript collision detection
Jquery collision of 2 elements
jQuery ajax collision issue
Mouse draggable collision between 2 rectangles using javascript
Related Tags