How can I prevent an element from dropping into an area?

O

Oleg Mikhailov2018-02-22 17:12:34

JavaScript

Oleg Mikhailov, 2018-02-22 17:12:34

There is such a problem:
If I drag an element from the side and lower it onto the filled area, then it disappears, it does not stay there, this is the correct behavior. But if before that we first put an element on an unfilled area, and then drag the same element onto the filled one again, then it is placed on the filled area and the previous one with the unfilled area disappears.

html code

<!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
}