Develop Reference

How to drop in and drop out from dropable zone jquery

I work with dropable zones, and i have 2 zones is a Dropbox where a create boxes and Final Destination where i drop boxes, for now it's working good but if i want to drop out from Final Destination to Dropbox it's not working.
If check code, i see that box left in Final Destination container.
So i want to have possibility to drop in and drop out from containers, exacly from Final Destination to Dropbox
JSFIDDLE
Code:
$(document).ready(function() {
$("#addBtn").click(function() {
const $div = $("<div>", {
class: "alert alert-info draggable alwaysTop",
text: "Say-Da-Tay!"
}).draggable({
revert: 'invalid',
cursor: 'move',
});
$("#dropbox").prepend($div);
});
$(".droppable").droppable({
accept: ".draggable",
drop: function(event, ui) {
const draggable = ui.draggable;
const $droppable = $(this);
console.log(event.pageX, event.pageY, ui);
$(draggable).detach().css({
position: 'absolute',
left: ui.offset.left - $droppable.offset().left + 15 + 1,
top: ui.offset.top,
}).appendTo($droppable);
}
});
});
.alwaysTop {
width: max-content;
z-index: 99999999;
}
#final_dest {
min-height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="col-md-4">
<div class="panel panel-primary parentPanel">
<div class="panel-heading">
<h3 class="panel-title">Dropbox</h3>
</div>
<div class="panel-body droppable" id="dropbox">
</div>
</div>
</div>
<div class="btn - btn-warning col-md-2" id="addBtn">
Add Item
</div>
<div class="col-md-4">
<div class="panel panel-success parentPanel">
<div class="panel-heading">
<h3 class="panel-title">Final Destination</h3>
</div>
<div class="panel-body droppable" id="final_dest">
</div>
</div>
</div>
<div id="offset">
</div>
</div>

Not able to display the image in the cropping area

Trying to display the image to the cropper. The image URL is there in the html src attribute but the image is not appearing.
When I click the edit button, I need to show the current image(The image which is above the edit button) in the cropper. So I can crop the part of the image i want. After cropping the image, if i click the update button, it should be updated. Please help me to complete.
window.onload = function() {
'use strict';
const noImage = 'https://via.placeholder.com/200x65';
var Cropper = window.Cropper;
var URL = window.URL || window.webkitURL;
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);
var cropBtn = document.querySelector('#crop-btn');
var rotate = document.querySelector('#rotate');
var resetImage = document.querySelector('#reset');
var zoomIn = document.querySelector('#zoomIn');
var zoomOut = document.querySelector('#zoomOut');
var deleteCofirmBtn = document.querySelector('#deleteCofirmBtn');
var profilePicture = document.querySelector('#profilePicture');
var deleteLinkContainer = document.querySelector('.deleteProfileImgWrap');
var modal = $('#modal');
var croppable = false;
var options = {
aspectRatio: 3 / 1,
viewMode: 1,
cropBoxResizable: false,
guides: false,
minContainerWidth: 300,
minContainerHeight: 200,
minCropBoxWidth: 200,
minCropBoxHeight: 65,
movable: true,
preview: '.img-preview',
ready: function() {
croppable = true;
},
};
var cropper = new Cropper(image, options);
var originalImageURL = image.src;
var uploadedImageType = 'image/jpeg';
var uploadedImageName = '';
var uploadedImageURL;
var inputImage = document.getElementById('editImage');
inputImage.addEventListener('click', function() {
const old_image = profilePicture;
image.src = old_image.src;
modal.modal({
backdrop: 'static'
});
cropper.destroy();
cropper = new Cropper(image, options);
console.log(`success`);
});
rotate.addEventListener('click', function() {
cropper.rotate(90);
});
reset.addEventListener('click', function() {
cropper.reset();
});
zoomOut.addEventListener('click', function() {
cropper.zoom(-0.1);
});
zoomIn.addEventListener('click', function() {
cropper.zoom(0.1);
});
deleteCofirmBtn.addEventListener('click', function() {
profilePicture.src = noImage;
$(".deleteProfileImgWrap").hide();
$('.file-upload-label').parent().fadeIn();
deleteLinkContainer.style.display = 'none';
});
cropBtn.addEventListener('click', function() {
let roundedCanvas;
let imgSrc = cropper.getCroppedCanvas({
width: 200,
height: 65
}).toDataURL();
deleteLinkContainer.style.display = 'block';
profilePicture.src = imgSrc;
});
}
#media(max-width: 767px) {
.profile-picture-wrap {
padding: 10px !important;
}
}
.profile-picture-wrap {
padding: 30px;
border: 1px solid #ccc;
border-radius: 4px;
}
.upload-button {
font-size: 1.2em;
}
.file-upload {
display: none !important;
}
.file-upload-label {
color: #007bfc;
font-weight: normal;
cursor: pointer;
}
#profilePicture {
cursor: pointer;
}
.file-upload-label:hover {
font-weight: bold;
}
.profile-pic {
cursor: pointer;
width: 200px;
height: 65px;
}
.profile-pic-wrap {
border: 1px solid #ccc;
padding: 30px 14px;
}
.my-profile-wrp p {
margin-bottom: 25px;
}
/* Cropper css */
.cropper-view-box,
.cropper-face {
border-radius: unset;
}
.profile-picture-wrap {
display: inline-block;
position: relative;
}
.profile-picture-wrap img {
border-radius: 0%;
}
.p-image {
position: unset;
}
.cropper-container {
margin-right: auto;
margin-left: auto;
}
.deleteProfileImgWrap {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet">
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js">
</script>
</head>
<body>
<div class="profile-picture-wrap">
<img id="profilePicture" src="https://cdn.paperindex.com/piimages/left-column/large-pool-of-suppliers.jpg" alt="Profile Picture">
<p id="editImage" class="text-center">Edit</p>
</div>
<p class="mrgn-top-4 deleteProfileImgWrap">Delete Photo
</p>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mrgn-top-100"></div>
<!--topbar-header-wrap-->
</main>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Crop Your Photo</h4> <span></span>
</div>
<div class="modal-body">
<div class="img-container text-center">
<img id="image" src="" alt="Picture" style="width: 100%;max-height: 300px;">
<div class="mrgn-top-15">
<div class="btn-group">
<button id="zoomIn" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Zoom In" class="fa fa-search-plus" aria-hidden="true"></i></button>
<button id="zoomOut" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Zoom Out" class="fa fa-search-minus" aria-hidden="true"></i></button>
<button id="rotate" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Rotate" class="fa fa-repeat" aria-hidden="true"></i></button>
<button id="reset" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Reset" class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="crop-btn" class="btn btn-default" data-dismiss="modal">Add
Photo</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- leftbox -->
<div class="box-2">
<div class="result"></div>
</div>
<!--rightbox-->
<div class="box-2 img-result hide">
<!-- result of crop -->
<img alt="" class="cropped" src="#"></div>
<!-- input file -->
<div class="box">
<div class="options hide">
<input class="img-w" type="hidden">
</div>
<!-- save btn -->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button><button class="btn save hide" data-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js">
</script>
<script src="https://cdn.paperindex.com/js/header/pi-header-functions.js">
</script>
</body>
</html>

function getRoundedCanvas(sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
/* var width = sourceCanvas.width;
var height = sourceCanvas.height; */
var width = 100;
var height = 100;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
}
window.addEventListener('DOMContentLoaded', function() {
var image = document.getElementById('image');
var button = document.getElementById('button');
var result = document.getElementById('result');
var croppable = false;
var cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
minContainerWidth: 300,
minContainerHeight: 200,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
ready: function() {
croppable = true;
},
});
button.onclick = function() {
var croppedCanvas;
var roundedCanvas;
var roundedImage;
if (!croppable) {
return;
}
// Crop
croppedCanvas = cropper.getCroppedCanvas();
// Round
roundedCanvas = getRoundedCanvas(croppedCanvas);
// Show
roundedImage = document.createElement('img');
roundedImage.src = roundedCanvas.toDataURL()
result.innerHTML = '';
result.appendChild(roundedImage);
};
});
img {
max-width: 100%;
}
.cropper-view-box,
.cropper-face {
border-radius: 50%;
}
.cropper-point.point-se {
height: 5px !important;
width: 5px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" rel="stylesheet" />
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="result"></div>
Edit
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
<!-- <img id="image" src="https://d1shuhu6tm6s0s.cloudfront.net/piimages/find-suppliers/Paper_Manufactures_PaperIndex_Map.png" alt="Picture">
</div> -->
</div>
<div class="modal-footer">
<button id="button" type="button" class="btn btn-success" data-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>

change src iframe on javascript not working

i try to chenge the src ifame in js but i cant success.
the i frame always empty and without content of new window src.
if i put the src inside the iframe its work ( i cant do that becuse i need id to src and i got that on js function)
html:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe src="" id="iframePOP" style="zoom:0.60" width="99.6%" height="250" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default text-center" data-dismiss="modal">close</button>
</div>
</div>
</div>
js:
function ShowPopup(id) {
$('#myModal').on('show', function () {
document.getElementById("iframePOP").src="/Game.aspx?GameId=" + id;
});
$('#myModal').modal({ show: true })
}
i tried also this:
function ShowPopup(id) {
var frameSrc = "/Game.aspx?GameId=" + id;
$('#myModal').on('show', function () {
$('iframe').attr("src", frameSrc);
});
$('#myModal').modal({ show: true })
}

Have you tried assigning your whole domain name into your var frameSrc?
EDIT:
Try changing $('#myModal').on('show', function () { ... } into $('#myModal').is(':visible', function(){ ... }); and make sure the ID of the modal you are referencing is correct. If that didn't work, try this $('#myModal').on('show.bs.modal', function (e) { ... })

Draggable is not working inside modal popup

I trying to implement swapping of div using dragging and dropping.
It is working fine without modal popup.
But the dragging and dropping is not working when I implement the same inside the modal popup.
What am I missing ?
HTML
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class='droppable'>
<div class="draggable">Draggable 1</div>
</div>
<div class='droppable'>
<div class="draggable">Draggable 2</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
javaScript
$(document).ready(function () {
window.startPos = window.endPos = {};
makeDraggable();
$('.droppable').droppable({
hoverClass: 'hoverClass',
drop: function(event, ui) {
var $from = $(ui.draggable),
$fromParent = $from.parent(),
$to = $(this).children(),
$toParent = $(this);
window.endPos = $to.offset();
swap($from, $from.offset(), window.endPos, 200);
swap($to, window.endPos, window.startPos, 1000, function() {
$toParent.html($from.css({position: 'relative', left: '', top: '', 'z-index': ''}));
$fromParent.html($to.css({position: 'relative', left: '', top: '', 'z-index': ''}));
makeDraggable();
});
}
});
function makeDraggable() {
$('.draggable').draggable({
zIndex: 99999,
revert: 'invalid',
start: function(event, ui) {
window.startPos = $(this).offset();
}
});
}
function swap($el, fromPos, toPos, duration, callback) {
$el.css('position', 'absolute')
.css(fromPos)
.animate(toPos, duration, function() {
if (callback) callback();
});
}
});
Draggable Demo
Draggable Demo inside modal popup

Simply because the modal by default is display: none; so the the javascript can't find the elements to init the function for dragging!
what you need to do is to delay the drag function until the elements are not displayed to none.
other than that the dragging is working, the fiddle was messed up because it was missing the jQuery file, also don't forget the priorities jQuery must be the first JS file to be loaded
https://jsfiddle.net/2eysmghe/2/

Modal only displays first image

I have got an issue where my modal only displays the first image. What I am trying to do is that i want to display a dynamic gallery. Every "post" can have 0-* images and based on how many images there are in the database for this post thats how many will appear. I came across this issue and have found others having similar issues but not exactly the same.
This code is basically a partial view where the post is generated. The Modal is displayd correct amount of times but only displays the first picture.
Thanks so much in advance
<ul class="imageRow">
#foreach (var item in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</a>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#image-gallery').removeData('bs.modal');
});
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
}
});
</script>
}

You are using the same ID (id="image-gallery") for all of your modals. HTML element IDs are supposed to be unique! You need to generate different IDs for each of your modals.