将图像放在另一个特定的 div 上时切换图像
[英]Switching an image when dropped on another specific div
问题描述
I am looking to switch an image when dropped on a specific div.
我希望在放置在特定 div 上时切换图像。 eg if I have divs with images A, B, C;例如，如果我有图像 A、B、C 的 div； If I dropped A on B, A would change to D, (D,B,C);如果我把 A 放在 B 上，A 会变成 D，(D,B,C)； but if I dropped A on C, A would change to E (E,B,C).但是如果我把 A 放在 C 上，A 会变成 E (E,B,C)。 Also, if I dropped D on B, D would change to F (F,B,C).另外，如果我把 D 放在 B 上，D 会变成 F (F,B,C)。
Here is my code so far... I have only coded for divs A & B so far, but I have tried to use .switchClass;到目前为止，这是我的代码......到目前为止，我只为 div A 和 B 编码，但我尝试使用 .switchClass; .addClass/.remove class; .addClass/.remove 类； and the .replace functions, but none of have seemed to work for me.和 .replace 功能，但似乎没有一个对我有用。 I don't know if I am implementing those wrong or if there is something fundamentally wrong elsewhere.我不知道我是否在实施这些错误，或者其他地方是否存在根本错误。 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Switch 2</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery- ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; border:dotted; background-image: url(images/needle.jpeg); background-size: 100px 100px; background-repeat: no-repeat;} #droppable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px; border:dotted; background-image: url(images/rat.png); background-size: 100px 100px; background-repeat: no-repeat;} </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $( function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ drop: function( event, ui ) { $( '#draggable' ).css( "background-image" ).replace(/^url|[\\(\\)]/g, ''); } }); }); </script> </head> <body> <div id="draggable" class="ui-widget-content"> </div> <div id="droppable" class="ui-widget-header"> </div> </body> </html>
2 个解决方案
解决方案1
0 2017-10-23 23:33:40
Well, I can´t really understand your question, but I think read de documentation of jQuery UI would be very helpful to you https://jqueryui.com/droppable/好吧，我无法真正理解您的问题，但我认为阅读 jQuery UI 的文档对您非常有帮助https://jqueryui.com/droppable/
Edit: Ok then, once you made your image dropable, you can add a listener to the event this way:编辑：好的，一旦您将图像设置为可放置，您就可以通过这种方式向事件添加侦听器：
$( "#MyImage" ).on( "drop", function( event, ui ) {$(this).atrr("src","newImage.jpg")} );
Is somewhat better if your image is a div with the image as a background, and you use addClass removeClass methods, but that is of to you.如果您的图像是一个以图像为背景的 div，并且您使用 addClass removeClass 方法，那会好一些，但这对您来说是。
解决方案2
0 2017-11-04 00:21:42
you are using wrong the css() method.您使用了错误的 css() 方法。 By using just one argument, you return the value of an attribute, and then use .replace(/^url|[()]/g, '');通过只使用一个参数，你返回一个属性的值，然后使用 .replace(/^url|[()]/g, ''); does absolutly nothing (the returned value disapears withou changing the value of the element. you may want to use:绝对什么都不做（返回值消失而不改变元素的值。您可能想要使用：
$( '#draggable' ).css( "background-image",$( '#draggable' ).css( "background-image" ).replace(/^url|[\(\)]/g, '') );
But that makes your code unredeable.但这会使您的代码无法恢复。 I would advice you to use classes instead.我建议你改用类。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.