Olegatorapp
@Olegatorapp
Java/Android dev

Как запретить опускать элемент на область?

Есть такая проблема:
Если тяну элемент сбоку и опускаю его на закрашенную область, то он пропадает, не остаётся там, это правильное поведение. Но если перед этим поставить сперва элемент на не закрашенную область, а потом вытянуть ещё раз такой же элемент на закрашенную, то он ставится на закрашенную и пропадает предыдущий с не закрашенной.
5a8ecfaea9ec9689116612.png
html код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />

    <title>Where have I been? - Demo</title>
    <meta name="description" content="Where have I been?" />

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
	<script type="text/javascript">
	    google.load("jquery", "1.4.2");
		google.load("jqueryui", "1.7.2");
	</script>

	<link rel="stylesheet" type="text/css" href="stylesheets/style.css" media="all" />

	<script type="text/javascript">
    $(document).ready(function(){
        //Counter
        counter = 0;
        //Make element draggable
        $(".drag").draggable({
            helper:'clone',
            containment: 'frame',

            //When first dragged
            stop:function(ev, ui) {
            	var pos=$(ui.helper).offset();
            	objName = "#clonediv"+counter
            	$(objName).css({"left":pos.left,"top":pos.top});
            	$(objName).removeClass("drag");


               	//When an existiung object is dragged
                $(objName).draggable({
                	containment: 'parent',
                    stop:function(ev, ui) {
                    	var pos=$(ui.helper).offset();
                    	console.log($(this).attr("id"));
						console.log(pos.left)
                        console.log(pos.top)
                    }
                });
            }
        });
        //Make element droppable
        $("#frame").droppable({
			       drop: function(ev, ui) {

        				if (ui.helper.attr('id').search(/drag[0-9]/) != -1){
        					counter++;
        					var element=$(ui.draggable).clone();
        					element.addClass("tempclass");
        					$(this).append(element);
        					$(".tempclass").attr("id","clonediv"+counter);
        					$("#clonediv"+counter).removeClass("tempclass");

        					//Get the dynamically item id
        					draggedNumber = ui.helper.attr('id').search(/drag([0-9])/)
        					itemDragged = "dragged" + RegExp.$1
        					console.log(itemDragged)

        					$("#clonediv"+counter).addClass(itemDragged);
        				}
        	}
        });



    });

	</script>



</head>

<body>

<div id="wrapper">
	<div id="options">
    <div>Network Device
      <details>
        <summary></summary>
    		<div id="drag1" class="drag"></div> <!-- end of drag1 -->
    		<div id="drag2" class="drag"></div> <!-- end of drag2 -->
      </details>
    </div>  <!-- end of Network Device -->
    <div>End devices
      <details>
        <summary></summary>
    		<div id="drag3" class="drag"></div> <!-- end of drag3 -->
    		<div id="drag4" class="drag"></div> <!-- end of drag4 -->
      </details>
    </div> <!-- end of End Device -->
	</div><!-- end of options -->
	<div id="frame">
	</div><!-- end of frame -->
</div><!-- end of wrapper -->
</body>
</html>
css
body {
	  text-align: center;
}
#wrapper {
	  text-align: left;
	  width: 720px;
	  margin-left: auto;
	  margin-right: auto;
}

#options{
	width: 200px;
	height:750px;
	border:1px solid black;
	float:left;
	background-color: #84acb3;
}

#frame{
	width:513px;
	height:750px;
	//background-image: url("../images/UK-Map.gif");
	background-repeat: repeat-y;
    	background-position: 0 0;
    	border:1px solid black;
    	float:right;
}

#tbldevs{
	border:1px solid black;
	width:80%;
	margin-left:50px;
	margin-top:10px;
}

#tbldevs th{
	text-align:center;
	height:50px;
	width:50px;
}

#tbldevs td{
	height:50px;
}


#drag1 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("../images/1-wifi.png");
	width:32px;
	height:32px;
}

#drag2 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("../images/2-modem.png");
	width:32px;
	height:32px;
}

#drag3 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("../images/3-router.png");
	width:32px;
	height:32px;
}

#drag4 {
	margin-left:15px;
	margin-top:15px;
	background-image: url("../images/4-network.png");
	width:32px;
	height:32px;
}



.ui-draggable-helperMoving {
	border: 1px dotted #000;
	padding: 6px;
	background: #fff;
	font-size: 1.2em;
	width:100px;
	height:100px;
}

.ui-draggable-helperStoped {
	border: 1px solid #000;
	width:5px;
	height:5px;
}



/* classes for dragged stuff */
.dragged1 {
	position:absolute;
	background-image: url("../images/1-wifi.png");
	width:32px;
	height:32px;
}

.dragged2 {
	position:absolute;
	background-image: url("../images/2-modem.png");
	width:32px;
	height:32px;
}

.dragged3 {
	position:absolute;
	background-image: url("../images/3-router.png");
	width:32px;
	height:32px;
}

.dragged4 {
	position:absolute;
	background-image: url("../images/4-network.png");
	width:32px;
	height:32px;
}



#element{
	border:1px solid red
}
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы