Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
.deals {
  display: flex;
  align-items: stretch;
  /*justify-content: space-between;*/
  margin:0;
  position: relative;
}
.deals_table_wrapper .swiper-wrapper {
  width: calc(100% - 10rem);
​
}
.deals_table_wrapper .swiper-scrollbar {
  position: fixed !important;
  bottom: 1rem !important;
}
.deals .swiper-slide {
  width:15rem;
  min-width: 12em;
  height: unset;
}
.deals ._status_column {
  margin: 0.5rem;
  transition: all 0.15s ease-in-out;
  padding-bottom: 10rem;
  height: 100%;
}
.deals ._status_column:not(:nth-child(1)) {
  /*margin-left:1rem;*/
}
.deals ._status_column ._dropzone {
  position: fixed;
  top:0;
  right:0;
  left:0;
  height:100%;
  z-index: -1;
  transition: all 0.15s ease-in-out;
}
​
.deals ._status_column ._dropzone.ui-droppable-hover {
  background: rgba(255,255,255,0.7);
/*  background: rgba(208,238,255,0.9);*/
  border-radius: 5px;
}
.deals ._status_column ._hdr {
  background: #fff;
  padding: 0.4rem 0.5rem;
  margin: -0.3rem;
  position: sticky;
  top: 0;
  z-index: 11;
}
.deals ._status_column ._hdr._sticky {
  margin: 0 0 0 -0.3rem;
}
.deals ._status_column ._hdr ._title {
  font-weight:bold;
}
.deals ._status_column ._hdr ._cnt {
  float: right;
}
.deals ._status_column ._hdr ._price {
  opacity: 0.7;
}
.deals ._status_column ._action_btn {
  text-align: center;
  font-size: 0.9rem;
  margin-top:0.9rem;
}
.deals ._status_column ._action_btn a {
  display:block;
  padding: 0.5rem 0;
  border-radius:3px;
  text-decoration:none;
  background-color:rgba(0,0,0,0.02);
  transition:all 0.3s ease-in-out;
}
.deals ._status_column ._action_btn a:hover {
  background-color:rgba(0,0,0,0.07);
}
​
.deals_item a {
  color:inherit;
}
.deals_item {
  background:#fff;
  border-radius:6px;
  padding:0.5rem 0.8rem;
  margin-top:1rem;
  position:relative;
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
  flex-shrink: 0;
}
.deals_item._patient_primary {
  border:2px #8BC34A solid;
  color: #3a7f05;
  padding:calc(0.5rem - 2px) calc(0.8rem - 2px);
}
.deals_item._lost {
  background:#ffe0e0;
  color:#d32f2f;
}
.deals_item._patient_primary._lost {
  border:2px #efa8a8 solid;
}
.deals_item.ui-draggable-dragging {
  box-shadow:0px 0px 4em rgba(0,0,0,0.1);
  position: fixed;
  z-index: 9999999;
}
​
.deals_item ._photo {
  display: block;
  float: left;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
  margin-right: 0.5rem;
​
}
​
.deals_item ._header a {
  text-decoration:none;
}
​
.deals_item ._name {
  display: block;
  font-weight:bold;
  margin-bottom:0.4rem;
}
.deals_item ._date,
.deals_item ._operator,
.deals_item ._status {
  font-size:0.85rem;
  opacity:0.7;
  display:block;
}
​
.deals_item ._origin {
  font-size: 0.9rem;
  color: #dc8300;
  margin: 0.1rem 0 0.1rem 0;
  display: block;
}
​
​
.deals._legend {
  font-size:0.8rem;
  line-height:1.6rem;
  vertical-align:middle;
  padding: 1rem;
}
.deals._legend .deals_item {
  margin: 0 0.5rem 0 1.5rem;
  height: 1.6rem;
  width: 2rem;
}
.deals._legend .deals_item:nth-child(1) {
  margin-left:0;
}
  </style>
  
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
</head>
<body>
  <div class="swiper swiper-container" id="js-deals-table">
    <div class="deals swiper-wrapper" id="deals_table">
      <div class="swiper-slide">
        <div class="_status_column status_1" data-count="7" data-loaded="7" data-status="1">
          <div class="_dropzone"></div>
          <div class="_hdr">
            <span class="_title">Status 1</span>
            <span class="_cnt">7</span>
            <div class="_price">0,00 грн</div>
          </div>
​
          <div class="deals_item clearfix deal_16 crm_lead_10  _patient_primary" data-id="16" data-ord="1690899587">
            <div class="_header">
              <div class="_hdrdata">
                <a href="#">
                  <span class="_name field_lead_name">Long text Test test long long text with two or more lines</span>
                  <span class="_date">+380443454354</span>
                  <span class="_date">01.08.2023 17:19</span>
                  <span class="_status"></span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide">
        <div class="_status_column status_2" data-count="0" data-loaded="0" data-status="2">
          <div class="_dropzone"></div>
          <div class="_hdr">
            <span class="_title">Status 2</span>
            <span class="_cnt"></span>
            <div class="_price">0,00 грн</div>
          </div>
        </div>
      </div>
 
      <div class="swiper-slide">
        <div class="_status_column status_7" data-count="1" data-loaded="1" data-status="7">
          <div class="_dropzone"></div>
          <div class="_hdr">
            <span class="_title">Status 3</span>
            <span class="_cnt">1</span>
            <div class="_price">0,00 грн</div>
          </div>
​
          <div class="deals_item clearfix deal_12 crm_lead_6  _patient_primary" data-id="12" data-ord="1688556923">
            <div class="_header">
              <div class="_hdrdata">
                <a href="#">
                  <span class="_name field_lead_name">пропорпро</span>
                  <span class="_date">+380933333333</span>
                  <span class="_date">05.07.2023 14:35</span>
                  <span class="_status"></span>
                </a>
              </div>
            </div>
          </div>
​
        </div>
      </div>
    </div>
​
  </div>
​
  <script type="text/javascript">
    var elem_container = document.querySelector('#js-deals-table');
​
        $(".deals_item", $("._status_column")).draggable({
            cancel: "a.ui-icon", // clicking an icon won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move",
            refreshPositions: true,
            appendTo: elem_container,
            start: function(event, ui) {
                var selection = document.getSelection();
                selection.empty();
                var rect = event.target.getBoundingClientRect();
                $(ui.helper).css('width', `${ rect.right-rect.left }px`);
​
            }
        });
​
        $("._status_column ._dropzone").droppable({
            accept: ".deals_item",
            classes: {
                "ui-droppable-active": "ui-state-highlight"
            }
        });
  </script>
​
</div>
  
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers