Jquery UI Drag Drop Как добавить информационное сообщение?

Question

Я делаю проект с библиотекой Jquery UI Drag Drop.Но когда я пытаюсь добавить информационное сообщение, сообщение может быть возобновлено.Когда я пытаюсь выполнить процесс вставки, я сталкиваюсь с трудностями.

Я хочу добавить сообщение по-разному для каждого из 2 полей .

Как добавитьперетащить сообщение?

Требуемый вывод : https://i.stack.imgur.com/eBqi4.gif

КОДЫ : https://jsfiddle.net/bw5ky9r7/

$(document).ready(function(){

 
	$("#deactive-cards").droppable({
	  accept: "#active-cards > div",
	});
	$("#active-cards").droppable({
	  accept: "#deactive-cards > div",
	});

	$("#deactive-cards, #active-cards").sortable({
	  placeholder: "",
	  connectWith: ".flex-container",
	  containment: "#maximum-drag",
	  revert: true,
	  scroll: false,
	  receive: function(event, ui) {
	    $("#active-cards-count").text($("#active-cards").find("div").length);
	  }
	});
  
  });

	.flex-container {
	  text-align: center;
	  padding: 0;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  margin: 5px 10px;
	  min-height: 115px;
	  overflow: hidden;
	  flex-wrap: wrap;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  box-shadow: rgba(0, 0, 0, 0.23) 0px 0px 5px 0px inset;
	  background: rgb(249, 249, 249);
	  padding: 15px 5px;
	  border: 2px solid transparent;
	}

	.flex-container>div {
	  cursor: all-scroll;
	  margin: 3px 2px;
	  text-align: center;
	  flex-direction: row;
	  height: 77px;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 2px;
	  border-bottom-width: 3px;
	  padding: 10px;
	  max-width: 92px;
	  box-sizing: border-box;
	  background: #ffffff;
	  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
	  position: relative;
	}

	.flex-container>div>img {
	  user-drag: none;
	  user-select: none;
	  -moz-user-select: none;
	  -webkit-user-drag: none;
	  -webkit-user-select: none;
	  -ms-user-select: none;
	}

	.title-box {
	  padding: 10px;
	  position: relative;
	}

	.title-box h5 {
	  text-transform: uppercase;
	  color: #11acbe;
	  font-size: 17px;
	  font-weight: 500;
	  display: inline-block;
	  margin-right: 10px;
	  line-height: 1.1;
	  position: relative;
	  margin-bottom: 13px;
	  padding-left: 5px;
	}

	.title-box h5:before {
	  top: -5px;
	  margin-bottom: 0;
	  content: '';
	  background-color: #11acbe;
	  width: 3px;
	  height: 30px;
	  position: absolute;
	  left: -10px;
	}

	.ui-droppable-active {
	  box-shadow: none !important;
	  background-image: radial-gradient(circle, rgba(237, 253, 255, 0.07), rgba(0, 205, 231, 0.1), rgba(0, 188, 212, 0.1), rgba(0, 188, 212, 0.15)) !important;
	  border: 2px dashed #00bcd4 !important;
	}

	.ui-sortable-helper:before {
	  content: " ";
	  border: 2px solid #00bcd4;
	  background-image: radial-gradient(circle, rgba(237, 253, 255, 0.07), rgba(0, 205, 231, 0.1), rgba(0, 188, 212, 0.1), rgba(0, 188, 212, 0.15));
	  position: absolute;
	  top: 0;
	  right: 0;
	  width: 100%;
	  height: 100%;
	}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  

<div class="col-lg-12" id="maximum-drag">
  <div class="title-box">
    <h5>ACTIVE DISPLAY CARDS (<span id="active-cards-count">0</span>)</h5>
    <div style="font-size: 14px;color: #6e6e6e;">It is a list of your display cards that are active on the server.</div>
  </div>
  <div class="flex-container" id="active-cards">

  </div>
  <div class="title-box">
    <h5>YOUR DISPLAY CARDS</h5>
    <div style="font-size: 14px;color: #6e6e6e;">List of display cards you can use.</div>
  </div>
  <div class="flex-container" id="deactive-cards">
    <div id="item-1"><img src="https://svgur.com/i/D1R.svg" style="width: 90%"></div>

  </div>
</div>

Answer 1

#active-cards:empty:before{
             content: "Drag and drop the display cards you want to use here.";
             padding: 15px;
              text-shadow: 0px 1px 0px #ffffff;
            }
            #deactive-cards:empty:before{
               content: "All your display cards are being used.";
               padding: 15px;
                 text-shadow: 0px 1px 0px #ffffff;
            }