在<div>对象恢复到原始位置后，如何进行随机数功能？

Question

因此，对于单个服务站点，我们的想法是在该区域上刷卡，并根据您与可放置空间的交互方式获得某些消息。我需要知道的是添加一个 if else 函数，该函数使用随机数变量来发生2个不同的函数。 因此，每当执行out：function（）时，您都会收到消息：

＆＃34;请在此网站再次刷卡进入＆＃34;

或

另一个函数发生在隐藏某些div并使其出现的位置。 （我在我正在使用的代码片段中有一些代码，我认为很接近）

如果我的编码词典已关闭，我很抱歉，我对此非常陌生。谢谢你的建议。

＆＃13;

＆＃13;

$(function() {
    $("#draggable").draggable({
    	containment: 'body', 
        revert:  function(dropped) {
             var $draggable = $(this),
                 hasBeenDroppedBefore = $draggable.data('hasBeenDropped'),
                 wasJustDropped = dropped && dropped[0].id == "droppable";
             if(wasJustDropped) {
                 // revert, it's in the droppable
                 return true;
             } else {
                 if (hasBeenDroppedBefore) {
                     // don't rely on the built in revert, do it yourself
                     $draggable.animate({ top: 0, left: 0 }, 'slow');
                     return false;
                 } else {
                     // just let the build in work, although really, you could animate to 0,0 here as well
                     return true;
                 }
             }
        }
    });
    
    
    
    

    $("#droppable").droppable({
    	over: function() {
            $(this).find('p').html('Reading...');
        },
        
        out: function() {
            $(this).find('p').html('Please Swipe Again At This Website To Enter');
        },
        
        revert: function() {
            $(this).find('p').html('');
        },

        drop: function() {
            $(this).find('p').html('Error Reading Your Card');

        }
      //  random generated function I am trying to make
       /*   $("#droppable").droppable({
    	over: function() {
            $(this).find('p').html('Reading...');
        },
        
        out: function() {
        var number = 1 + Math.floor(Math.random() * 2);
    	
    		if (number == 2) {
    			$('#draggable, #draggable2, #droppable, #upperSwiper, #swiper').hide();
    			$('#hi').show();
    		} else {
    			return true;
        	}, */
    });
});      

＆＃13;

#hi {
	width: 50%;
	height: 50%;
	position: relative;
	margin: 0 auto;
	display: none;
	}
	

div.blackBar {
	position: relative;
	background-color: black;
	width: 200px;
	height: 23px;
	top: 75%;
	}

div.frontSwiper {
	background-color: /* #A9A9A9 */ transparent;
	width: 85%;
	height: 65px;
	position: relative;
	-webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);
	z-index: ;
	border-radius: 10px;
	}
	
body { 

	width: 90%; 
	height: 90%;
	margin: auto; 
	
	}
	
#swiper {
	background-color: /* #b8b8b8*/ transparent;
	width: 34%;
	height: 75px;
	margin: 0 auto;
	position: relative; 
    Top: 200%;
    z-index: 0;
    border-radius: 0px;
	}
	
#upperSwiper {

	background-color: transparent;
	width: 34%;
	height: 75px;
	margin: 0 auto;
	position: relative; 
    Top: 5%;
    z-index: 1;
    border-radius: 0px;
	}
	
#droppable { 

	width: 200px;
	Height: 150px;
    margin: 0 auto;
	border-Width: 1px;  
    background-image:none;
    background-color: transparent;
    text-align: center;
    top: 10%;
    
	}
	
#draggable, #draggable2 {
	position: relative;
	top: 50%;
	width: 200px; 
	height: 130px;  
	border-Width: 0px;
	background-image:none;
	left: 75%;
	background-color: #FFD700;
	-webkit-clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 91% 0, 100% 14%, 100% 100%, 0% 100%);
	z-index; -1;
	}

＆＃13;

<link rel="stylesheet" 
		href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>

<div id="swiper">
	<div class="frontSwiper"></div>
	<div id="upperSwiper"></div>
</div>
<div id="draggable" class="ui-widget-content">
	<div class="blackBar"></div>
    <p></p>
</div>

<div id="droppable" class="ui-widget-header">
    <p style="font: italic bold 30px/40px Arial, Sans-serif; width: 50%, position: fixed;"></p>
    
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可能想要deactivate或drop事件。触发该事件时，您需要检查x / y位置并确认它与起始x / y匹配。

http://api.jqueryui.com/droppable/