jquery перетаскиваемый + прокручиваемый: изменение контрольной точки на курсор вместо центра клона - PullRequest
Новая
       23

jquery перетаскиваемый + прокручиваемый: изменение контрольной точки на курсор вместо центра клона

0 голосов
/ 11 марта 2020

Похоже, опорная точка перетаскиваемого объекта JqueryUI является центром перетаскиваемого объекта. Я хочу использовать курсор вместо , возможно ли это?

При настройках по умолчанию при перетаскивании большого объекта (например, 1000px x 1000px) мне нужно переместиться как минимум на 500px, чтобы активировалась буква. Я бы предпочел схватить его за бок и просто отодвинуть на несколько пикселей, чтобы курсор вошел в предмет сброса, чтобы активировать его. 

$( function() {
		$( ".sortable" ).sortable({
			revert: true
		});
		$( ".draggable" ).draggable({
			connectToSortable: ".sortable",
			helper: "clone",
			revert: "invalid"
            
		});
		$( "ul, li" ).disableSelection();
	} );
 
* {
 box-sizing:border-box;
}

.panelchoice,
.faketoolbar 
{
    --width:114px;
    background-color:#ededed;
    width:calc(var(--width) * 10);
    display:inline-block;
}

.faketoolbar ul,
.panelchoice  ul{
 padding:0;
 margin:0;
 list-style-type:none;
}

.faketoolbar ul li,
.panelchoice  ul li{
 border:1px solid blue;
    height:160px;
}

.panelchoice > ul > li 
{
display:inline-block;
float:left;
}

.faketoolbar > ul > li ,
.panelchoice > ul > li 
{
display:table-cell;
vertical-align:top;
}


.faketoolbar > ul > li > a,
.panelchoice > ul > li > a
{
    text-align:center;
    display:inline-block;
    height:60px;
    position:relative;
    color:#000 !important;
    font-weight: 300;
    font-size: 11px;
    text-decoration: none;
}
.panelchoice > ul > li > a
{
    width:114px;
}
.panelchoice > ul > li > a:hover
{
    filter:brightness(1.25);
}


.faketoolbar > ul > li > a > img,
.panelchoice > ul > li > a > img
{
    display: block;
    text-align:center; 
    margin:auto;
	width:32px;
	height:32px;
	border:1px solid #000;
}


 .ui-sortable-placeholder
{
    border:1px solid red;
    visibility: visible !important;
    height:auto !important;
    min-height:24px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> 

Drag an item from first panel <br />
<div class="panelchoice">
    <ul>
        <li class="draggable"><a href="#"><img src='1.png' />a icon</a></li> 
        <li class="draggable"><a href="#"><img src='3.png' />another icon</a></li> 
        <li class="draggable"><a href="#"><img src='5.png' />icon with long name</a></li> 
        <li class="draggable"><a href="#"><img src='7.png' />icon</a></li>
        <li class="draggable"><a href="#"><img src='applications/keynote/icons/slice11/slice_0_5.png'  />more icon</a></li> 
    </ul>
</div>	

<br />
to the second panel <br />

<div class="faketoolbar">
    <ul class="sortable">
            <li class="draggable"><a href="#"><img src='1.png' />foo</a></li> 
            <li class="draggable"><a href="#"><img src='7.png' />icon</a></li> 
            <li class="draggable"><a href="#"><img src='19.png' />prefs</a></li>
    </ul>
</div>
...