CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrag-and-drop
S14321K
S14321K

Reputation: 230

Drag and Drop the whole div container. (Move Pop-up Modal dialog box)

Here I have a Modal pop-up. I want to make the modal draggable. And also I want the "Ok" button to be in green on hover and "cancel" should be in red on hover. I's it possible to do it in single css class?

.hidModal{
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 500;
    opacity:2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.windowModal {
    width: 400px;
    top:15%;
    position: fixed;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background:rgba(255, 204, 153,0.2);
    z-index: 501;
    opacity:0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#winMod{
    position: relative;
}

.windowModal:hover{
    opacity: 1.0;
    }


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover { 
    background: #aaaaaa;
    color: #ff0022;
    cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.bttnMod:hover { 
    background: #00d9ff;
    cursor: pointer;
}
<div class="hidModal">
    <div id="winMod" class="windowModal">
    
        <div  style="margin-top: 1%;">
        <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();" >
            
        <div style="margin-top: 1%;">
            <label class="label lblwidth1">&nbsp;</label>
            <input class="bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50">
            <input class="bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();">
        </div>
    </div>
  </div>

I tried some posible ways. But it didn't work. Those were in jQuery. But I dont have much knowledge in that. So please help me to solve this. Thanks in advance for helping.

Upvotes: 1

Views: 2336

Answers (4)

Dagovax
Dagovax

Reputation: 165

This is an example in plain JavaScript. Click and move the header to move the popup itself. It will stay inside the parent container.

var offset = [0, 0];
var isDown = false;

var headerElement = document.getElementById("#PopupHeader");
var popupElement = document.getElementById("#PopupMainDiv");
if (headerElement && popupElement) {

  // On MouseDown event callback
  var mouseDown = function(event) {
    event.stopPropagation();
    event.preventDefault();
    isDown = true;
    if (popupElement) {
      popupElement.addEventListener("mousemove", mouseMove);
      popupElement.addEventListener("mouseup", mouseUp);
      offset = [
        event.clientX,
        event.clientY
      ];
    }
  }

  // On MouseUp event callback
  var mouseUp = function() {
    isDown = false;
    if (popupElement) {
      popupElement.removeEventListener("mousemove", mouseMove);
      popupElement.removeEventListener("mouseup", mouseUp);
    }
  }

  // On MouseMove event callback
  var mouseMove = function(event) {
    if (isDown) {
      if (popupElement.parentElement) {
        let newX = offset[0] - event.clientX;
        let newY = offset[1] - event.clientY;
        const rect = popupElement.getBoundingClientRect();
        const boundaries = 
        popupElement.parentElement.getBoundingClientRect();
        const x = Math.min(
            Math.max(boundaries.left, rect.left - newX), 
            boundaries.right - rect.width
          ),
          y = Math.min(
            Math.max(boundaries.top, rect.top - newY), 
            boundaries.bottom - rect.height
          );
        popupElement.style.left = `${x}px`;
        popupElement.style.top = `${y}px`;
        offset = [
          event.clientX,
          event.clientY
        ];
      }
    }
  }
  headerElement.addEventListener('mousedown', mouseDown);
}
.PopupLayered {
  background-color: rgba(40,40,40,0.7);
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  display:flex;
  justify-content:center;
  align-items:center
}

.PopupMainDiv {
  position: absolute;
  overflow: hidden;
  border: 2px solid #dddddd;
  border-radius: 5px;
  width: 400px;
  height: 200px;
  background-color: grey;
  color:white;
}

.PopupHeader {
  background-color: lightgray;
  color: #333333;
  font-weight: bold;
  position: relative;
  height: 25px;
  cursor: move;
  color: black;
}

/* Popup title span */
.PopupHeader span {
  width: 90%;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0.3em 0.3em;
}

/* Popup close button */
.PopupHeader button {
  color: white;
  background-color: #cc0000;
  border: none;
  border-radius: 2px;
  position: relative;
  float: right;
  white-space: nowrap;
  overflow: hidden;
  width: 20px;
  margin: 0.1em 0.2em;
  height: 20px;
}

  /* Popup close button hover */
.PopupHeader button:hover {
  background-color: red;
  cursor: pointer;
}

.Popup {
  position: absolute;
  background-color: gray;
  width:400px;
  height: 200px;
  text-align: center;
}
<div id="#PopupLayered" class="PopupLayered">
  <div id="#PopupMainDiv" class="PopupMainDiv">
    <div id="#PopupHeader" class="PopupHeader">
      <span>Click and drag the header!</span>
      <button type="button">x</button>
    </div>
    <div id="#Popup" class="Popup">
        <img src="http://www.alleycat.org/wp-content/uploads/2019/03/FELV-cat.jpg" width="450"/>
    </div>
  </div>
</div>

Upvotes: 0

S14321K
S14321K

Reputation: 230

This gives the exact output.

dragElement(document.getElementById("parnt"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
.hidModal{
	position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 500;
    opacity:2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}



.windowModal {
  	width: 400px;
    position: relative;
    margin: 10% auto;
    border-radius: 10px;
    background:rgba(255, 204, 153,0.2);
    z-index: 501;
    opacity:0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#parnt{
	  position: absolute;
    z-index: 10;
    color: #fff;
    z-index: 10;
    top: 40%;
    bottom: 85%;
    left: 15%;
    right: 50%;
}

.windowModal:hover{
	opacity: 1.0;
	}


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover { 
	background: #aaaaaa;
	color: #ff0022;
	cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.bttnMod:hover { 
	background: #00d9ff;
	cursor: pointer;
}
<div class="hidModal">
  <div id="parnt">
    <div id="winMod" class="windowModal">
    
   		<div  style="margin-top: 1%;">
   		<input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();" >
    		
    	<div style="margin-top: 1%;">
    		<label class="label lblwidth1">&nbsp;</label>
    		<input class="bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50">
    		<input class="bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();">
    	</div>
    </div>
    </div>
  </div>

This works as I expected.

Upvotes: 0

user7974621
user7974621

Reputation:

For the draggable part, if you're using JQuery there's the Draggable property.

$("#your-modal").draggable();

You can also specify which part of the modal to assign the property to (in this example, the modal's header).

$("#your-modal").draggable({ handle: "#your-modal-header" });

As for the buttons, you can change their background color and add some transition animation with the :hover selector. Though I believe it is best to handle their classes separately as shown below.

ok-button:hover {
  background-color: green;
  transition: 0.5s;
}

cancel-button:hover {
  background-color: red;
  transition: 0.5s;
}

Snippet:

.hidModal {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 500;
    opacity:2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.windowModal {
    width: 400px;
    top:15%;
    position: fixed;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background:rgba(255, 204, 153,0.2);
    z-index: 501;
    opacity:0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#winMod {
    position: relative;
}

.windowModal:hover {
    opacity: 1.0;
}


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover { 
    background: #aaaaaa;
    color: #ff0022;
    cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.ok-button:hover { 
    background-color: green;
  transition: 0.5s;
}

.cancel-button:hover { 
    background-color: red;
  transition: 0.5s;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

<div id="your-modal" class="hidModal">
    <div id="winMod" class="windowModal">
        <div style="margin-top: 1%;">
            <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();">
            <div style="margin-top: 1%;">
                <label class="label lblwidth1">&nbsp;</label>
                <input class="ok-button bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1"
                    style="width:50">
                <input class="cancel-button bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55"
                    onclick="winClose();">
            </div>
        </div>
    </div>
</div>

<script>
    $("#your-modal").draggable(); 
</script>

EDIT:

For a solution without having to include JQuery/JQueryUI (that is, pure Javascript), you can follow the below snippet for reference. Added some comments as it's a considerable amount of extra lines of code compared to the above snippet.

// Get your modal by it's ID and declare it as a variable
var modal = document.getElementById('your-modal');
// Declare variables for X and Y positions of your modal and mouse movements
var posX, posY, mouseX, mouseY;

// Triggers when the user clicks and holds the mouse down on your modal
modal.addEventListener('mousedown', function (event) {
    posX = this.offsetLeft;
    posY = this.offsetTop;
    mouseX = event.clientX;
    mouseY = event.clientY;

    // Triggers when the user moves the mouse around as it's holding the click down
    this.addEventListener('mousemove', moveElement, false);

    // Triggers when the user lets go of the mouse
    window.addEventListener('mouseup', function () {
        modal.removeEventListener('mousemove', moveElement, false);
    }, false);

}, false);

// Function in charge of repositioning the modal
function moveElement(event) {
    this.style.left = posX + event.clientX - mouseX + 'px';
    this.style.top = posY + event.clientY - mouseY + 'px';
}
.hidModal {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 500;
    opacity: 2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.windowModal {
    width: 400px;
    top: 15%;
    position: fixed;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: rgba(255, 204, 153, 0.2);
    z-index: 501;
    opacity: 0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#winMod {
    position: relative;
}

.windowModal:hover {
    opacity: 1.0;
}


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover {
    background: #aaaaaa;
    color: #ff0022;
    cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.ok-button:hover {
    background-color: green;
    transition: 0.5s;
}

.cancel-button:hover {
    background-color: red;
    transition: 0.5s;
}
<div id="your-modal" class="hidModal">
    <div id="winMod" class="windowModal">
        <div style="margin-top: 1%;">
            <input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();">
            <div style="margin-top: 1%;">
                <label class="label lblwidth1">&nbsp;</label>
                <input class="ok-button bttnMod" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1"
                    style="width:50">
                <input class="cancel-button bttnMod" type="button" name="Cancel" value="Cancel" tabindex="2"
                    style="width:55" onclick="winClose();">
            </div>
        </div>
    </div>
</div>

Upvotes: 2

Basil Abubaker
Basil Abubaker

Reputation: 1651

This is one of the plugins that allow you to make the div draggable. But for the different background color I'm not sure if it's doable with the same class name.

$( function() {
    $( "#winMod" ).draggable();
  });
  
.hidModal{
	position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.2);
    z-index: 500;
    opacity:2;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
}

.windowModal {
  	width: 400px;
  	top:15%;
    position: fixed;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background:rgba(255, 204, 153,0.2);
    z-index: 501;
    opacity:0.5;
    background: -moz-linear-gradient(#ffe6cc, #ffa64d);
    background: -webkit-linear-gradient(#ffe6cc, #ffa64d);
    background: -o-linear-gradient(#ffe6cc, #ffa64d);
}

#winMod{
	position: relative;
}

.windowModal:hover{
	opacity: 1.0;
	}


.closeMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 4px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.closeMod:hover { 
	background: #aaaaaa;
	color: #ff0022;
	cursor: pointer;
}

.bttnMod {
    background: #606061;
    color: #FFFFFF;
    line-height: 15px;
    text-align: center;
    width: 50px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.bttnMod:hover { 
	background: #00d9ff;
	cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="hidModal">
    <div id="winMod" class="windowModal">
    
   		<div  style="margin-top: 1%;">
   		<input class="closeMod" type="button" name="Close" value="X" style="width:8%" onclick="winClose();" >
    		
    	<div style="margin-top: 1%;">
    		<label class="label lblwidth1">&nbsp;</label>
    		<input class="bttnMod" id="OK" type="button" name="OK" value="OK" onclick="clickok();" tabindex="1" style="width:50">
    		<input class="bttnMod" id="Cancel" type="button" name="Cancel" value="Cancel" tabindex="2" style="width:55" onclick="winClose();">
    	</div>
    </div>
  </div>

Upvotes: 1

Related Questions