Drag and Drop - Depois de Drag, elemento pode ser arrastado novamente

votos
0

Quando eu soltar a minha draggable, ele não pode ser arrastar novamente a menos que eu cliquei no div e pode ser arrastar novamente. Eu quero é, ela só vai ser apenas arrastar. Aqui está o meu código. I fechado arrastar e soltar evento em uma variável.

function ShowHeaders(data) {
            give = data;
            $.each(data, function (record, recordnumber) {
                $(#listB).append(<div id='B1' class='slot col-md-2'> <div id='a1' class='item' myval=' + recordnumber.FieldName + ' mysample=' + recordnumber.SampleData + ' current> + recordnumber.FieldName +  </div></div>);
                $(.divSAMPLEDATA .slot).empty();
            });
            $(#divLOADER).hide();


            var dragOption = {
                delay: 10,
                distance: 5,
                opacity: 0.45,
                revert: invalid,
                start: function (event, ui) {
                    $(.ui-selected).each(function () {
                        $(this).data(original, $(this).position());
                    });
                },
                drag: function (event, ui) {
                    var offset = ui.position;
                    console.log('dragged');
                    //console.log(ui, this)
                    $(.ui-selected).not(this).each(function () {
                        var current = $(this).offset(),
                            targetLeft = document.elementFromPoint(current.left - 1, current.top),
                            targetRight = document.elementFromPoint(current.left + $(this).width() + 1, current.top);
                        $(this).css({
                            position: relative,
                            left: offset.left,
                            top: offset.top
                        }).data(target, $.unique([targetLeft, targetRight]));

                        //console.log($.unique([targetLeft, targetRight]));

                    });
                },
                stop: function (event, ui) {
                    validate($(.ui-selected).not(ui.draggable));
                    console.log('drag');

                }
            }, dropOption = {
                accept: '.item',
                activeClass: green3,
                greedy: true,
                drop: function (event, ui) {
                    console.log(drop);
                    if ($(this).is(.slot) && !$(this).has(.item).length) {
                        console.log(appending);

                        $(this).append(ui.draggable.css({
                            top: '5px',
                            left: '5px'
                        }));

                        //var element = $(ui.draggable);
                        //$(element).draggable({ helper: 'clone' });

                        var itemcontainer = $(this).find(.item).attr(current);
                        $(.divSAMPLEDATA div[myval=' + itemcontainer + ']).html();
                        var standard = $(this).attr(myval);
                        var newsample = $(this).find(.item);
                        //$(this).find(.item).attr(current, standard);
                        //$(this).css('background-color', 'red');

                        $(.divSAMPLEDATA div[ myval=' + standard + ']).html(newsample.html($(this).find(.item).attr(myval)));

                       // $(.divSAMPLEDATA div[mysample=' + itemcontainer + ']).html(newsample);

                    } else {
                        console.log(reverting);
                        ui.draggable.animate({
                            top: 0,
                            left: 0
                        }, slow);

                    }
                    validate($(.ui-selected).not(ui.draggable));


                }
            }

            $(.box).selectable({
                filter: .item,
                start: function (event, ui) {
                    $(.ui-selected).draggable(destroy);
                },
                stop: function (event, ui) {

                    $(.ui-selected).draggable(dragOption)
                }
            });
            $(.slot).droppable(dropOption);

            function validate($draggables) {
                //$(.ui-selectee).addClass(ui-draggable-handle);
                $('.divSAMPLEDATA').children('div').find(.ui-selectee).addClass(ui-draggable ui-draggable-handle);
                $draggables.each(function () {
                    console.log($($(this).data(target)));
                    var $target = $($(this).data(target)).filter(function (i, elm) {

                        console.log($(this).is(.slot) && !$(this).has(.item).length);
                        return $(this).is(.slot) && !$(this).has(.item).length;
                    });
                    console.log($target);
                    if ($target.length) {
                        console.log('wew');
                        $target.append($(this).css({
                            top: '3px',
                            left: '3px'
                        }))
                    } else {
                        console.log('wew1');
                        $(this).animate({
                            top: 0,
                            left: 0
                        }, slow);
                    }

                });

                $(.ui-selected).data(original, null)
                    .data(target, null)
                    .removeClass(ui-selected);

            }

            $(function () {
                $(.item).draggable({ revert: invalid });
            });
            $(#divUPLOADER).fadeOut(slow, function () {

                $(#divCONTENT).fadeIn();
            });
        }

Obrigado!

Publicado 05/06/2017 em 07:29
fonte usuário
Em outras línguas...                            

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more